Open YBFACC opened 4 years ago
此图引用MDN
父容器设置
flex-grow
flex-shrink
flex-basis
space-evenly:均分空白。
space-around:首尾空白减半,其他均分。
space-between:首尾对齐,均分空白。
stretch:伸展
flex-start、center、flex-end
space-evenly
space-around
space-between
row :默认。从左到右排列
row-reverse:从右到左排列
column:从上到下排列
column-reverse:从下到上排列
column-reverse排列
center
flex-start
flex-end
baseline
stretch
center
flex-strat
flex-end
last baseline
center、flex-start、flex-end
space-between、space-around、space-evenly
可以看到弹性容器被分成上下2 个子项。空间平均分配,子项行高占满。
align-items以当前行高进行渲染。
align-content: space-around;
可以看到 行高被压缩,每行以当前行内最高的元素为基础。
不设置默认为0,数字越大,优先级越低。
<div class="father1"> <div class="son1" style="order: 4;">1</div> <div class="son1" style="order: 3;">2</div> <div class="son1" style="order: 2;">3</div> <div class="son1" style="order: 1;">4</div> </div>
默认设置为0。
它指定了flex容器中剩余空间的多少应该分配给项目
剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数,那么所有的项目将获得相同的剩余空间,否则将根据不同的flex-grow系数定义的比例进行分配。
第一项flex-grow:1
第一项flex-grow:0.6
默认设置为0。为0时不参与收缩。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
总宽度300px,子项宽度为100px,指定2个flex-shrink: 1
默认设置为auto。(含义是 "参照我的width和height属性")
width
height
指定了 flex 元素在主轴方向上的初始大小。
如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。
box-sizing
单值语法: 值必须为以下其中之一: 一个无单位数它会被当作的值。 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。 关键字none,auto或initial. 双值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一: 一个无单位数:它会被当作 <flex-shrink> 的值。 一个有效的宽度值: 它会被当作 <flex-basis> 的值。 三值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。 第二个值必须为一个无单位数,并且它会被当作 <flex-shrink> 的值。 第三个值必须为一个有效的宽度值, 并且它会被当作 <flex-basis> 的值。
单值语法: 值必须为以下其中之一:
它会被当作
<flex-basis>的值。
none
auto
initial
双值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一:
<flex-grow>
<flex-shrink>
<flex-basis>
三值语法:
指定align-content为center,第一项alidn-self为start。
CSS 常见布局方式
[使用 CSS 弹性盒子](
Flex
此图引用MDN
属性
父容器设置
flex-grow
,flex-shrink
与flex-basis
测试
justify-content
space-evenly:均分空白。
space-around:首尾空白减半,其他均分。
space-between:首尾对齐,均分空白。
stretch:伸展
flex-start、center、flex-end
space-evenly
space-around
space-between
flex-direction
row :默认。从左到右排列
row-reverse:从右到左排列
column:从上到下排列
column-reverse:从下到上排列
column-reverse排列
flex-wrap
align-items
center
flex-start
flex-end
baseline
stretch
center
flex-strat
flex-end
last baseline
align-content
center、flex-start、flex-end
space-between、space-around、space-evenly
stretch
baseline
center
space-between
当出现换行时,align-content和align-items的行为
可以看到弹性容器被分成上下2 个子项。空间平均分配,子项行高占满。
align-items以当前行高进行渲染。
align-content: space-around;
可以看到 行高被压缩,每行以当前行内最高的元素为基础。
align-items以当前行高进行渲染。
order
不设置默认为0,数字越大,优先级越低。
flex-grow
默认设置为0。
它指定了flex容器中剩余空间的多少应该分配给项目
第一项flex-grow:1
第一项flex-grow:0.6
flex-shrink
默认设置为0。为0时不参与收缩。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
总宽度300px,子项宽度为100px,指定2个flex-shrink: 1
flex-basis
默认设置为auto。(含义是 "参照我的
width
和height
属性")指定了 flex 元素在主轴方向上的初始大小。
如果不使用
box-sizing
改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。flex
align-self
指定align-content为center,第一项alidn-self为start。
参考
CSS 常见布局方式
[使用 CSS 弹性盒子](