28、弹性布局flex

Posted 2023-03-09

参考技术A 布局类型：

1、浮动+定位

2、自适应（百分比）

3、响应式布局

4、弹性布局（flex布局）

弹性布局的优缺点：

1、优点：兼容性支持所有浏览器（Webkit内核的浏览器要加上-webkit-），可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局；

2、缺点：弹性布局较复杂，需兼容IE6；

注意：当使用了弹性布局，在css中的float、clear和vertical-align就会失效

1、flex-direction弹布局方向即容器方向

row：默认方向，从左到右

row-reverse：从右向左

column：从上到下

column-reverse：从下到上

2、flex-wrap换行

nowrap：默认不换行

wrap：向下换行

wrap-reverse：向上换行

3、flex-flow方向和换行的简写

例如，flex-flow：row nowrap；

4、justify-content容器方向上的对齐方式

flex-start：默认向左对齐

flex-end：向右对齐

center：居中对齐

space-between：两端对齐，子元素之间有间隔，子元素与边框之间无间隔

space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍

5、align-items默认垂直容器方向上的对齐方式

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline：与第一个子元素中文字的基线对齐

stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度

6、align-content子元素两种方向上的对齐

flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐

flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐

center：当容器方向子元素刚好填满时，与垂直方向的中点对齐

space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等间距间隔

space-around：两个方向两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍

stretch（默认值）：沾满整个垂直方向

1、order排序，integer（整数），数值小的在前面

2、flex-grow放大比例，number，默认值为0

3、flex-shrink缩小比例，number，默认值为1

注：给所有子元素设置该属性为1，当空间不足时，所有子元素将等比例缩小平分所有空间。如果单独给某个子元素设置为0，那么该子元素将空间不足时不缩小。

4、flex-basis属性

该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

5、flex属性：flex-grow、flex-shrink和flex-basis的简写

6、align-self属性

该属性允许设置过额子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性

auto（默认值）：表示默认继承父级的align-items属性

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline：与第一个子元素中文字的基线对齐

stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度