CSS3---flex

最新推荐文章于 2025-03-22 20:24:59 发布

丸子嘻嘻

最新推荐文章于 2025-03-22 20:24:59 发布

阅读量177

点赞数

本文链接：https://blog.youkuaiyun.com/TWFKXP/article/details/80687008

版权

Flex

flex 是Flexible Box 的缩写，”弹性布局”
可以为任何一个容器制定 flex 布局（行内、块级都可以）
兼容性，需要添加-webkit- , -moz-等前缀
设置了 flex 之后，float、clear、vertical-align都失效（为什么）

容器、项目、主轴、交叉轴
父元素——flex 容器
子元素——flex 项目
水平方向上的主轴
垂直方向上的交叉轴
flex 项目默认沿着主轴排列

【容器上具有的属性】

flex 容器上具有的属性有：

    flex-direction：轴的方向
    flex-wrap：是否换行
    flex-flow：以上两个属性的简写
    justify-content：容器内项目在主轴上的对齐方式
    align-items：容器内项目在交叉轴上的对齐方式
    align-content：多跟轴线的对齐方式

flex-direction：
决定主轴的方向（即项目的排列方向）

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap
一条轴线排不下所有的项目，如何换行

nowrap ：不换行
wrap：换行，第一行是满的
wrap-reverse：换行，第一行是不满的

flex-flow
是 flex-direction 和 flex-wrap 的简写模式，默认的属性是 row nowrap
```
flex-flow ：  <flex-direction> || <flex-wrap>;
```
- justify-content
  项目在主轴上的对齐方式
  
  flex-start（默认值）：左对齐
  flex-end：右对齐
  center：居中
  space-between：两端对齐，项目之间的间隔都相等。
  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items
项目在交叉轴上的对齐方式

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

align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴（拉伸）

【项目上具有的属性】

    order：项目之间的排序问题
    flex-grow：项目的放大比例
    flex-shrink：项目的缩小比例
    flex-basis：项目所占据主轴空间的大小
    flex：flex-grow， flex-shrink，flex-basis，的简写
    align-self：单个项目的对齐方式

- order
定义项目的排序方式，数值越小越靠前，默认值是0，可以是负值

flex-grow
定义项目的放大比例，默认值是0，即使有剩余的空间也不缩放
负值对该属性无效
flex-shrink
定义了项目的缩小比例，默认值是1，如果有一个项目该指是1，另一个项目该值是0，则在空间不够的时候，缩小为1 的那个项目
负值对该属性无效
flex-basis
定义了在分配多余空间之前，设置项目在主轴中所占据的空间，默认值是 auto，即项目本来的大小
flex
是 flex-grow， flex-shrink ， flex-basis的简写，默认值是 0 1 auto

flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

auto 指的是 (1 1 auto) ， none 指的是 (0 0 auto)。
align-self
设置单个项目的对齐方式，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于 stretch

auto | flex-start | flex-end | center | baseline | stretch;