Flexbox 布局有2个关键的概念
- Flex容器（Flex Container） ：父元素显式设置了 display:flex
- Flex项目（Flex Items） ：Flex容器内的子元素
使用 Flexbox 布局,容器尽量不要设置固定的 width, 可以设置为 auto
在 Flexbox中将方向分为水平的主轴和竖直的侧轴
其中Flex容器有以下参数:
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
每个参数都有自己的含义:
flex-direction:
指定容器内部项目的方向
row || column || row-reverse || column-reverse;
- row: 水平从左到右
- column: 垂直从上到下
- row-reverse: 水平从右到左
- column-reverse: 垂直从下到上
flex-wrap:
指定容器内部项目是否换行
wrap || nowrap || wrap-reverse;
- wrap: 自适应屏幕大小,自动换行 (从左到右,从上到下)
- nowrap: 不换行
- wrap-reverse: 自动换行(从左到右,从下到上,如图)
flex-flow:
是 direction 和 wrap 的速写,接收2个参数,第一个是 direction 第二个是 wrap
row || column || row-reverse || column-reverse;
wrap || nowrap || wrap-reverse;
两两随意搭配,共有12种
值得注意的是flex-wrap 只考虑换行不换行,而具体的方向最好让 flex-direction 来做
比如从右向左排列,换行: row-reverse wrap
justify-content:
指定容器内部项目的对齐方式,很像text-align,参考的标准是主轴
flex-start || flex-end || center || space-between || space-around
- flex-start 向左对齐
- flex-end 向右对齐
- center 中间对齐
- space-between 向外对齐
- space-around 分散性对齐
需要提一下后面三种情况的不同
center:
space-between:
space-around:
align-items
align-items就是justify-content的竖直版本,参考的标准是侧轴
flex-start || flex-end || center || stretch || baseline
- flex-start 向上对齐
- flex-end 向下对齐
- center 垂直中央对齐
- stretch(默认) 占满容器
- baseline 基线对齐(第一行文字的下划线)
详细讲一下 stretch 和 baseline
stretch(默认值)
如果项目未设置高度或设为auto，将占满整个容器的高度。
baseline
项目的第一行文字的基线对齐
align-content
定义了多行的对齐方式。如果项目只有一行，该属性不起作用。
flex-start | flex-end | center | space-between | space-around | stretch;
多行且没有设置 align-content 的时候是这样的(align-content: stretch;(默认))
会根据容器的高度,平均分隔成两层
- flex-start: 多行一起向上对齐
- flex-end: 多行一起向下对齐
- center: 多行一起中央对齐
- space-between: 多行一起向外对齐,这里的外是指上下
- space-around: 多行一起分散对齐
- stretch: 根据容器的高度,平均分隔成两层
其实简单的说,就是把一整行当做一个项目看,然后把画面选择90度以后的align-items
Flex项目属性
order || flex-grow || flex-shrink || flex-basis
order
给项目排序,数字越小(可以为负数)优先级最高,同优先级的情况下,按默认先后顺序排序
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
在有剩余空间的前提下,放大一定的倍数.这里指的是对剩余空间的使用率,如果没有剩余空间写多少都没用.
flex-shrink
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-grow 和 flex-shrink
指的都是对剩余空间的利用率而不是直接的放大缩小,最起码会保证项目本身的 width属性的宽度,当然,如果项目的 width 是 auto 的话就是按比例放大缩小了
flex-basis
在调整flex-grow 和 flex-shrink之前的基本宽度
优先级似乎高于 width? 可能还和 CSS 的选择器优先级有关?
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
阮一峰建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
auto | flex-start | flex-end | center | baseline | stretch
该属性可能取6个值，除了auto，其他都与align-items属性完全一致
