一、Flex 布局就是"弹性布局",用来为盒子提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局
加了display: flex;属性,我们就可以认为该盒子是一个弹性容器了
//css代码块
.box {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
}
.info {
width: 50px;
height: 50px;
border: 1px solid red;
text-align: center;
line-height: 50px;
}
//html代码块
<body>
<div class="box">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
</div>
</body>
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
二、概念
采用 Flex 布局的元素,称为 Flex 容器,简称"容器",或者弹性盒子。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
Flex容器默认存在两根轴:水平的主轴和垂直的侧轴,项目默认沿主轴排列。
三、属性
这些属性需要加在容器上,不可以加在项目上
· flex-direction
· just-content
· flex-wrap
· align-items
· align-content
3.1、flex-direction属性
flex-direction属性决定主轴的方向与项目的排列方向。