flex布局

纱纱梦女

已于 2022-08-30 19:35:33 修改

阅读量570

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html css

于 2022-08-28 18:59:08 首次发布

本文链接：https://blog.youkuaiyun.com/yulingpan123/article/details/126572671

1.flex布局基本概念

flex布局是什么？

Flex（Flexible Box），弹性布局。使用Flex布局的元素，称为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目（flex item）。

如何元素变为flex容器？

.container {
  display: flex | inline-flex;
}

1.flex-direction属性决定主轴的方向（改变items流动方向）

2.flex-wrap属性改变折行

注：默认情况下，项目都排在一条线（轴线）上。如果一条轴线排不下，flex-wrap属性定义如何换行。

3.justify-content属性定义主轴对齐方式（justify，使行齐）

.container {
  justify-content: flex-start | flex-end | center | space-between | 
                   space-around | space-evenly;
}

注：默认主轴为横轴，flex-direction: row，可以通过属性更改。

space空白部分的均分，如图：（以横轴为例，space-between是其中最常用的）

4.align-items属性定义次轴对齐方式（align，排列/排齐）-单行排列方式

.container {
  align-items: flex-start | flex-end | center | stretch | baseline;
}

注：默认值stretch（伸展），如果item未设置高度或设为auto，会占满次轴（即，整个容器的高度）。

baseline（基线），item的第一行文字的基线对齐，基本不用。

5.align-content属性定义多根轴线的对齐方式（多行）-多行排列方式

注：如果item只有一根轴线（一行），该属性不起作用。

轴线空隙均分：

1.order属性定义项目的排列顺序（order顺序）

.item {
  order: <integer>;
}

注：item排列顺序，数值越小排列越靠前，默认值为0。

2.flex-grow属性定义项目的放大比例（grow扩大）

.item {
  flex-grow: <number>;        /* default 0 ,默认0 不放大*/
}

注：默认值为0，即如果存在剩余空间，不放大。如果所有item的flex-grow数值相等，则会等分扩大空间。

3.flex-shrink属性定义了项目的缩小比例（shrink缩小）

.item {
  flex-shrink: <number>;         /* default 1 ,会缩小*/
}

注：flex-shrink值为0，不会缩小。

flex-grow和flex-shrink，0都表示不放大/缩小，正数表示缩放倍数，都不接受负数。

4.flex-basis属性定义项目占据的主轴空间

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

注：flex-basis控制项目基准宽度，即图中main-size。默认值auto，item本身大小。

5.align-self属性定义项目自身次轴对齐方式

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

注：align-self通过覆盖align-items属性，定制item自身的align-items。默认值auto，继承父元素的align-items属性（没有父元素为stretch）。

1.flex实践

效果图：

2.小结

contain页面：JS Bin - Collaborative JavaScript Debugging