CSS Flex布局笔记
一、Flex布局简介
Flex布局,全称是Flexible Box,也被称为弹性盒子布局。它是一个一维的布局模型,主要用于在一维空间(行或列)内对元素进行灵活排列。Flex布局提供了更高效、更直观的方式来对容器中的项目进行对齐、排序和分布空间。
二、Flex容器与Flex项目
display: flex;
或display: inline-flex;
的元素就是Flex容器。三、主要属性
row
(默认值,从左到右)、row-reverse
(从右到左)、column
(从上到下)和column-reverse
(从下到上)。nowrap
(默认,不换行)、wrap
(换行)和wrap-reverse
(反向换行)。flex-direction
和flex-wrap
的简写属性,用于同时设置主轴方向和换行方式。例如,flex-flow: row wrap;
。flex-start
(默认,起点对齐)、flex-end
(终点对齐)、center
(居中对齐)、space-between
(两端对齐,项目之间的空间平均分布)、space-around
(每个项目两侧的空间平均分布)和space-evenly
(所有项目之间的空间以及项目两侧的空间平均分布)。stretch
(默认,项目会尽可能占据整个容器的高度)、flex-start
、flex-end
、center
、baseline
和stretch
。align-items
相似。四、使用Flex布局的好处
五、示例
下面是一个简单的示例,展示了如何使用Flex布局来排列一组项目:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
}
在HTML中:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
在这个示例中,.container
是一个Flex容器,它的子元素(.item
)是Flex项目。通过设置justify-content: space-between;
,项目之间的空间平均分布;通过设置align-items: center;
,项目在交叉轴上居中对齐。