CSS Flex布局完全指南

CSS Flex布局完全指南

引用

CSDN

1.

https://blog.csdn.net/qq_42374233/article/details/109364895

Flex布局是CSS3中的一种弹性布局方式，能够帮助开发者更灵活地控制页面布局。本文将详细介绍Flex布局的基本概念、容器属性和项目属性，帮助读者快速掌握这一重要布局方式。

什么是flex布局

Flex是Flexioble Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

Flex container：flex容器，指定一个盒子作为flex容器，就可以对这个容器里的元素进行一系列的操作，容器的命名一般是xxx-container

Flex item：flex容器中的每一项。

<div class="div-container">
  <div class="div-item sub-container">
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
  <div class="div-item"></div>
</div>

flex容器是可以嵌套的，即：一个元素可以在作为item的同时，也可以作为container

Container

表示外层容器

flex-direction

设置容器内部元素的排列方向

• row：定义排列方向：从左到右
• row-reverse：从右到左
• column：从上到下
• column-reverse：从下到上

flex-wrap

设置容器内部元素换行

• nowrap：不换行
• wrap：换行
• Wrap-reverse：反方向换行

justify-content

设置元素在主轴上的对齐方式

• flex-start：默认，左对齐 或者 上对齐
• flex-end：右对齐 或者 下对齐
• center：居中对齐
• space-between：两端对齐，元素之间等分，剩余部分空白
• space-around：两端对齐，剩余空白等分

align-items

设置容器中元素在交叉轴上的对齐方式

• stretch：默认，当元素的高度没设置，元素的高度会拉伸至容器高度一致
• flex-start：在交叉轴上向起点位置对齐
• flex-end：在交叉轴上向结束位置对齐
• center：居中对齐

Item

表示container中的每一项

• order：设置元素排序规则， 由小到大，默认为0

• flex-grow：用于设置元素的放大比例，默认为0。如果为0则不放大

• flex-shrink：控制元素缩小比例

• flex-basis：设置元素固定或者自动空间的占比

• align-self：重写align-items父属性