2022-05-26  点击量: 13

flex 布局

Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。

 

flexbox 的区域就叫做 flex 容器。为了创建 flex 容器, 我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后,容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值,所以 flex 容器中的所有 flex 元素都会有下列行为:

  1. 元素排列为一行 (flex-direction 属性的初始值是 row)。
  2. 元素从主轴的起始线开始。
  3. 元素不会在主维度方向拉伸,但是可以缩小。
  4. 元素被拉伸来填充交叉轴大小。
  5. flex-basis 属性为 auto。
  6. flex-wrap 属性为 nowrap。

 

以下6个属性设置在 flex 容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性决定主轴的方向(即项目的排列方向)
flex-direction有4个值。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

 

 

 

 

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

 

 

 

参考:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://developer.mozilla.org/zh-CN/docs/Glossary/Flex

评论已关闭!