flex 是什么
CSS 弹性盒子布局(Flexible Box/flexbox)是一种的布局模型,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。
说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。
flexbox 的两根轴线
主轴
主轴由 flex-direction 定义
flex-direction 有四个可选值
- row (水平方向,
通常
从左到右排列) - row-reverse (水平方向,
通常
从右到左排列) - column (垂直方向,
通常
从上到下排列) - column-reverse (垂直方向,
通常
从下到上排列)
说 通常
是因为排列方向会因书写模式的影响
交叉轴
垂直于主轴的轴
起始线和终止线
即指排列方向(受到书写模式的影响)
Flex 容器
把一个容器的 display
属性值改为 flex
或者 inline-flex。
Flex 容器的直接子元素
就成了flex
元素,默认具有如下行为:
- 元素排列为一行 (
flex-direction
属性的初始值是row
)。 - 元素从主轴的起始线开始。
- 元素。
- 元素被。
flex-basis
属性为auto。
flex-wrap
属性为nowrap。
Flex 容器属性: flex-direction
Flex 容器属性: flex-wrap
flex-wrap 默认值 no-wrap
简写属性 flex-flow
flex-flow
是 flex-direction 和 flex-wrap 组合
flex-flow: row no-wrap;
第一个指定的值为 flex-direction ,第二个指定的值为 flex-wrap.
可用空间
Flex 容器属性: flex-basis
flex-basis
定义了该元素的空间大小,取 width
的值,当没有设置width
时,默认为auto,大小由直接子元素的大小决定
Flex 容器属性: flex-grow
flex-grow
值为一个正整数,按一定比例分配可用空间
Flex 容器属性: flex-shrink
flex-shrink
属性是处理flex元素收缩的问题,可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下
Flex属性的简写
Flex
简写形式允许你把三个数值按这个顺序书写 — flex-grow,flex-shrink,flex-basis
。
Flex 容器属性: justify-content
justify-content
属性用来使元素在主轴方向上对齐
初始值是flex-start,元素从容器的起始线排列
- stretch
- flex-start (元素从容器的起始线排列)
- flex-end (元素从容器的起始线排列)
- center (中间排列)
- space-around (每个元素的左右空间相等)
- space-between (元素排列好之后的剩余空间拿出来,平均分配到元素之间,所以元素之间间隔相等)
Flex 容器属性: align-items
align-items
属性可以使元素在交叉轴方向对齐
这个属性的初始值为stretch,这就是为什么flex元素会默认被拉伸到最高元素的高度
- stretch(拉伸到最高元素的高度)
- flex-start(flex容器的顶部对齐)
- flex-end (flex容器的下部对齐)
- center (flex容器的中部部对齐)
Flex 容器属性:align-content
align-content 只对 flex-wrap: wrap;的 Felx 容器起作用 align-self
flex 元素属性:align-self
align-self 覆盖已有的 align-items
的值
developer.mozilla.org/zh-CN/docs/…
flex 元素属性:order
order 属性规定了弹性容器中的可伸缩项目在布局时的顺序
【笔记不易,如对您有帮助,请点赞,谢谢】