flex布局
时间:2019-09-05
本文章向大家介绍flex布局,主要包括flex布局使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
参考链接: https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb写的非常好
一、为什么要引入flex弹性布局?
- css标准中为我们提供了三种布局:标准文档流、浮动布局和定位布局。
- 但是这些布局在使用时回去缺少语义并且不够灵活。
- 此时就出现了flex布局,可以通过1个属性就能优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应。
二、什么是flex布局?
- flex的核心概念是容器和轴。容器包括外层的父容器和内层的子容器。轴包括主轴和交叉轴。
- 父容器可以统一设置子容器的排列方式,子容器可以单独设置自身的排列方式,如果两者同时设置,以子容器的设置为准。父容器具有justify-content和align-items两个属性,justify-content属性决定子容器沿主轴的排列方式;align-items属性决定子容器沿交叉轴的排列方式。
- 子容器具有flex和align-self两个属性。flex的值决定了子容器的伸缩比例。align-self可以单独设置子容器沿交叉轴排列的方式。该属性的可选值与父容器的align-items属性完全一致。如果两者同时设置,就以子容器的align-self属性为准。那么轴本身的方向怎么设置呢?flex-direction属性决定主轴的方向,交叉轴的方向由主轴确定。
三、具体的属性值
justify-content属性用于定义沿着主轴方向子容器的排列方式,包括五个属性值:
- flex-start:起始端对齐;
- flex-end:末尾端对齐;
- center:居中对齐;
- space-around:子容器沿主轴均匀分布,位于收尾两端的子容器到父容器的距离是子容器间距的一半;
- space-between:子容器沿主轴均匀分布,位于收尾两端的子容器和父容器相切
align-items:定义沿着交叉轴方向如何分配子容器的间距,包括五个属性值:
- flex-start:起始端对齐;
- flex-end:末尾端对齐;
- center:居中对齐;
- baseline:基线对齐,所有的子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器会与交叉轴起始端相切以确定基线。
- stretch:子容器沿交叉轴方向的尺寸拉伸至与父容器一致
flex
:子容器会按照 flex
定义的尺寸比例自动伸缩,如果取值为 none
则不伸缩。
- 可以是无单位数字(如:1, 2, 3),
- 也可以是有单位数字(如:15px,30px,60px),
- 还可以是
none
关键字。表示不伸缩
align-self:沿着交叉轴方向单独设置子容器的间距,包括五个属性值:
- flex-start:起始端对齐;
- flex-end:末尾端对齐;
- center:居中对齐;
- baseline:基线对齐,所有的子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器会与交叉轴起始端相切以确定基线。
- stretch:子容器沿交叉轴方向的尺寸拉伸至与父容器一致
flex-direction,包括四个属性值:
- row表示主轴的方向是向右,
- column表示向下,
- row-reverse表示向左,
- column-reverse表示向上。
注:flex布局会涉及到12个css属性,其中父容器和子容器各6个。常用的属性只有4个
原文地址:https://www.cnblogs.com/qing-5/p/11465414.html
- DeDeCMS v5.7 密码修改漏洞分析
- Java基础-20(01)总结,递归,IO流
- 一个Oracle bug的手工修复(r6笔记第59天)
- 由drop datafile导致的oracle bug(r6笔记第56天)
- Java中static关键字的作用
- Java基础-20(02)总结,递归,IO流
- Hive四种数据导入方式
- 34c3 部分Web Writeup
- 原来Oracle也不喜欢“蜀黍"(r6笔记第54天)
- Java基础19(01)总结IO流,异常try…catch,throws,File类
- 使用shell生成orabbix自动化配置脚本(r6笔记第53天)
- 现在 tensorflow 和 mxnet 很火,是否还有必要学习 scikit-learn 等框架?
- 数据的标准化与中心化以及R语言中的scale详解
- Java基础19(02)总结IO流,异常try…catch,throws,File类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java 数组转 List 的三种方式及对比
- C#代码折叠#region
- c#实时显示时间 C#-WinForm-Timer控件
- 记一次 JAVA 的内存泄露分析
- for循环、递归、回溯
- delete 后加 limit 是个好习惯么?!
- @Component,@Service 等注解是如何被解析的
- 怎么摆脱又臭又长的 Git 命令?
- Redis 怎么防止数据丢失?面试必问!
- 使用vs2015编写c语言的方法
- 哪些场景会产生OOM?怎么解决?
- 预处理命令
- IntelliJ IDEA 调试 Java 8 Stream,实在太香了!
- 仅需四步,写一个 Spring Boot Starter
- 一个简单案例,带你看懂GC日志!