CSS之Flex布局

ForSakenSoul63375
970 阅读4分钟

布局的传统解决方案，基于盒子模型，依赖display属性+position属性+float属性。对于那些特殊布局非常不方便。

是什么

Flex布局，意思是弹性布局，用来为盒子模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

注意

  1. WebKit内核的浏览器，必须加上-webkit前缀。
display: -webkit-flex
  1. 设置为Flex布局之后，子元素的flaot，clear和vertical-align属性将失效。

基本概念

Flex容器/项目

采用Flex布局的元素，称为Flex容器。简称容器，它的所有子元素自动成为容器成员，成为Flex项目。

Flex主轴/交叉轴

容器默认存在两跟轴。水平方向称为主轴，垂直方向称为交叉轴。
项目默认沿主轴排布。

Flex容器属性

共有6个属性，如下：

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

flex-direction

该属性决定主轴的方向。
值： row/column/ reverse-row/reverse-column
默认值为： row主轴为水平方向，起点在左边。

flex-wrap

默认情况下，项目都排在一条轴线上。该属性定义，如果一个轴线排列不下，是否换行。
值: nowrap/wrap/wrap-reverse（换行，第一行在下面)
默认值为 nowrap 表示不换行

flex-flow

flex-flow是flex-direction和flex-wrap的简写模式。默认值为 row nowrap。
但是不常见，还是分开写。

justify-content

定义了项目在主轴上的对齐方式。
值： flex-start/center/flex-end/space-between/space-around
默认值是：flex-start 左对齐
注意： 
space-between 表示 两端对齐，项目之间的间隔都相等（项目与左右边距没有距离） 记忆方法 between 表示项目间距离
space-around  每个项目两侧的距离相等（项目到左右边距的距离为项目间距离的一半）记忆方法 around表示项目周围，包括项目与左右边界的距离

align-items

定义项目在交叉轴上如何对齐。
默认值: stretch
值为：

  • flex-start  交叉轴起点对齐
  • center 中点对齐
  • flex-end 终点对齐
  • stretch 默认值 如果项目未设置高度，将占满整个容器的高度。
  • baseline 第一行的文字基线对齐。

image.png

align-content

定义了多根轴线的对齐方式，如果只有一个轴线，则不起作用。
默认值： stretch
值：

  • flex-start 与交叉轴的起点对齐
  • flex-end 与交叉轴的终点对齐
  • center 与交叉轴的中点对齐
  • space-between 与交叉轴两段对齐，轴线之间的间隔平均分布（与交叉轴 之间没有距离）
  • space-around 每根轴线两侧的距离都相等（与交叉轴 之间有距离）

image.png

Flex项目属性

项目属性共有6个：

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. aign-self

order

定义项目的排列顺序。数值越小，排列越靠前。
默认为0。

flex-grow 放大比例 0

定义项目的放大比例。默认为0，表示不放大，即如果存在剩余空间，也不放大。
如果其他项目的flex-grow属性都为1，则它们将等分剩余空间。
如果有的项目的flex-grow属性不同，则会按比例分配空间。

flex-shrink 缩小比例 1

定义项目的缩小比例。默认为1，即如果空间不足，该项目会缩小。
如果所有项目的flex-shrink属性都为1，那么当空间不足时，都将等比例缩小（默认情况下，或缩小）
如果一个项目的flex-shrink属性为0，那么当空间不足时，其他项目缩小，该项目不缩小。
负值对该属性无效。

flex-basis 固定空间 auto

（需要再理解）
定义了在分配多余空间之间，项目占据的主轴空间。 浏览器根据这个属性，来计算主轴是否还有剩余空间。
默认值为auto，表示项目的原来大小。

.item {
	flex-basis:<length>/auto
}

可以设定和宽度高度一样的值，则项目将占据固定空间。

flex

flex属性是 flex-grow，flex-shrink，flex-basis三个属性的缩写形式。
默认值是 0，1，auto
还有两个快捷值，auto（1，1，auto） none（0，0，auto）
建议优先使用这个属性。

flex取值问题

  1. flex 取值为auto  flex-grow 为 1 ，flex-shrink 1 flex-basis 为auto（表示自动缩放）
  2. flex取值为none flex-grow 为  0，flex-shrink 0 flex-basis 为auto
  3. flex取值为一个非负数字 这个数字为flex-grow的值，flex-shrink为 1 flex-basis 取 0 %（ 设置 flex-grow的值，会自动缩小）
  4. 当flex取值为一个长度或者百分比 设置 flex-basis的值，flex-grow为1  flex-shrink为1 （表示自动缩放）
  5. 当flex取值为两个非负数字 这两个数字 flex-grow 和flex-shrink的值。

flex： 1 代表什么？

align-self

align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值是auto。表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

avatar
文章
阅读
粉丝