Flex布局的完整基本语法
2017-05-16 本文已影响1013人
林立镇
应用在父元素上-flex box
1.模型 方向 换行
display: flex（盒子模型）
- 定义父元素为flex元素
flex-direction（方向）
概述：子元素的排列方向
- row (默认值): 从主轴起点到到主轴终点
- row-reverse: 从主轴终点到主轴起点
- column: 从侧轴起点到侧轴终点
- column-reverse:从侧轴终点到侧轴起点
flex-wrap（换行）
子元素在主轴上铺满时，是否换行
- Nowrap（默认值）:不换行
Flex容器能容纳所有的子元素（Flex项目）排列，即使浏览器出现了水平滚动条（当Flex容器中添加了很多个Flex项目，至使Flex容器的宽度大于视窗宽度）。 - Wrap:换行且从顶部到到底部排列
- Wrap-reverse:换行且从底部到到顶部排列
当你希望Flex容器内的Flex项目达到一定数量时，能换行排列。
当Flex容器中没有足够的空间放置Flex项目（Flex项目默认宽度），
flex-flow:方向 换行
- flex-flow :flex-direction flex-wrap
- 默认值Flex-flow:row nowrap
2.水平 垂直 多行垂直对齐
justify-content（水平对齐）
主轴方向对齐方式
定义了沿着主轴对齐。
它帮助分赔剩下多余的空闲空间给所有的flex项目。
- flex-start (默认值): flex项目从主轴起点开始无空闲空间地排列在一起
- flex-end: flex项目从主轴终点开始无空闲空间地排列在一起
- center: flex项目排列在主轴中间，两边空闲空间均匀分批
- space-between: 在主轴上的空闲空间均匀地分配到每两个flex项目中间
- space-around: 在主轴上每个flex项目两边都分配一样的空间
align-items（垂直对齐）
侧轴对齐方式
- stretch (默认值):把所有的元素伸开，所有flex项目的高度以最高的flex项目为准
- flex-start: 在主轴上排列的flex项目顶部，对齐侧轴的起点
- flex-end: 在主轴上排列的flex项目底部，对齐侧轴的终点
- center: 在主轴上排列的flex项目中部，对齐侧轴的中间
- baseline: flex项目沿着自己的基线对齐
align-content（多行flex项目垂直对齐）
当出现多行flex项目时，侧轴方向对齐方式
- stretch (默认值): flex盒子和flex项目没设置高度时，盒子高度以高度最高的flex项目为准
- flex-start: 多行flex项目顶部对准侧轴起点
- flex-end: 多行flex项目底部对准侧轴终点
- center: 多行flex项目中部对准侧轴中间，空闲空间均匀分配打破多行flex项目两边
- space-between:侧轴方向上，空闲空间均匀分配到每两行flex项目的中间
- space-around: 侧轴方向上，空闲空间均匀分配到每行flex项目的两边
应用在子元素-flex项目
1.水平排序 伸展 收缩 初始宽度/ 垂直位置和垂直伸展
Order（排序）
- 默认情况下，所有Flex项目的order值都是0
- 可以正负值，设置子元素排列的先后顺序号
- 如果两个以下Flex项目有相同的order值时，Flex项目重新排序是基于HTML源文件的位置进行排序。
flex-grow（伸展）
- 默认情况下，flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。表示flex-grow属性没有使用。
- 如果只有一个子元素设置了flex-grow的值，则这个子元素分配剩下的所有的空闲空间。如果你试着调整你浏览器的大小，Flex项目也会放大，以适应新的屏幕宽度。
- 如果多个子元素设置了flex-grow的值，则按照值的比例来分配剩下的空闲空间。
flex-shrink（收缩）
- 默认情况下，flex-shrink的值是1，也就是说flex-shrink开关也是打开的。
- 如果你试着调整你浏览器的大小，Flex项目也会放大，以适应新的屏幕宽度。
- 按照子元素设置的flex-shrink值，来按比例收缩flex项目。
flex-basis（初始宽度）
- 指定flex项目的初始宽度大小，可以是比例也可以是长度单位。
- 默认的值是auto。flex-basis可以取任何用于width属性的任何值。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了padding值）。
- 这意味着，如果你增加Flex项目中的内容，它可以自动调整大小。
- 然而，如果你想将Flex项目设置一个固定的宽度，现在Flex项目的宽度受到了限制。
- 值为0,内容不考虑周围的额外空间。
注意：如果flex-basis属性的值是0时，也需要使用单位。
即flex-basis: 0px不能写成flex-basis:0
align-self（垂直位置和垂直伸展）
控制单个flex项目侧轴的位置和高度
- auto
是将目标Flex项目的值设置为父元素的 align-items值，或者如果该元素没有父元素的话，就设置为 stretch。继承父元素的 align-item 值。 - flex-end
将目标项目（Flex项目）对齐到Cross-Axis的末端。 - center
将目标项目（Flex项目）对齐到Cross-Axis的中间。 - stretch
会将目标项目拉伸，以沿着Cross-Axis填满Flex容器的可用空间（Flex项目高度和Flex容器高度一样）。 - baseline
将目标项目沿着基线对齐。它与flex-start的效果看起来是一样的，不过我相信你理解了基线是什么。因为前面已经解释过。
2.flex：膨胀 收缩 初始宽度
- flex:0 1 === flex： 膨胀 收缩 （无值时，默认为0）
flex默认属性值以及所有的Flex项目都是默认行为
不伸展，会收缩 - flex:0 0 auto === flex:none
试着缩放一下浏览器，你会注意到弹性项目不会收缩其宽度。它们从父元素中突出来了，要看到所有内容，必须横向滚动浏览器。 - flex: 1 1 auto === flex: auto
还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。
此时，项目会填满可用空间，在缩放浏览器时也会随之收缩。 - flex: 2 1 0 === flex: 2
2 表示任何正数
3.绝对项目 相对项目
1. 什么是绝对项目和相对项目
- 绝对项目
Flex：膨胀宽度 收缩宽度
如果你只设置了flex-grow和flex-shrink值，flex-basis可能是默认值0。这就是所谓的绝对flex项目。 - 相对项目
Flex：膨胀宽度 收缩宽度 初始宽度
只有当你设置了flex-basis，你会得到一个相对flex项目。
2.绝对和相对Flex项目之间到底有啥区别
- 二者之间主要的区别在于间距及如何计算间距。
- 绝对Flex项目中，只根据 flex 属性来计算，而不是内容。
flex-basisi:0 - 一个相对Flex项目内的间距是根据它的内容大小来计算的。
flex-basis:auto
4.Margin:auto的作用
1.使用margin:auto
- 第一个Flex项目使用
margin:auto;前后 - 当在Flex项目上使用 margin: auto 时，左、右l两边会占据所有剩余空间。
- 让一个Flex项目的两边都用自动外边距对齐
margin-left: auto;
margin-right: auto;
2.Justufy-content属性什么时候不起作用
当在一个Flex项目上使用自动外边距（margin: auto）时，justify-content 属性就不起作用了。
当用 flex-direction: column 时
项目的宽度填满了空间
高度
- Flex（膨胀宽度、收缩宽度、初始宽度）属性变成了（高度）
- 本质上，每个作用于横向轴（即Main-Axis）上的 flex 属性，现在都会作用于纵向上的新Main-Axis。它只是在方向上的一个切换。
- 影响Main-Axis的每一个属性现在会影响新Main-Axis。像 flex-basis 这种会影响Main-Axis上Flex项目宽度的属性，现在会影响项目的高度，而不是宽度。
位置
- Main-Axis是从上到下，Cross-Axis是从左到右。
- Justify-content（水平位置）变成（垂直位置）
- justify-content: center；flex项目垂直居中了
- Align-items（垂直位置）变成（水平位置）
- align-items: center;Flex项目已经水平居中了
浏览器bug
- 在有些浏览器中，会有一个 bug，允许Flex项目收缩后比其内容尺寸小。这是个很古怪的行为。
- 解决这个 bug 的变通方案是把 flex-shrink 的属性值设置为 0，而不是默认值 1，同时，把 flex-basis 属性设置为 auto。
