Flex布局
2019-06-09 本文已影响12人
意蜀
什么是flex布局呢？flex布局也称作是响应式布局，它具有灵活性和敏捷性。当你给一个容器加上这条display:flex，就意味着它是一个flex容器，也就意味着它的后代的子元素也就成为该flex容器的member。
这个容器会自默认有2个轴，一个叫做主轴，一个是与主轴垂直的交叉轴。但是默认它的方向是沿着主轴排列。
属性
-
flex-direction代表着该flex容器内的主轴的方向，它的取值有4种。
-
column:即它的主轴方向是按列排，即主轴，也就是它的子元素的排列方向。
image.png
-
row:代表沿着主轴方向是按行排，即交叉轴。
image.png
-
column-reverse:代表沿着与主轴方向相反排列
image.png
-
row-reverse:代表沿着与交叉轴方向相反排列
image.png
2.flex-wrap默认值是nowrap表示不换行。 -
nowrap表示在该轴线不换行，如果该轴线的长度没有这4个盒子的宽度大，则盒子缩小其宽度，使其在其他条件满足的情况下（例如margin）平分该轴线的长度
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
height:300px;
width: 200px;
background-color: gainsboro;
display: flex;
flex-wrap: nowrap;
}
.div1{
height: 100px;
margin-top: 10px;
margin-left: 10px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="div">
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
</div>
</body>
</html>
image.png
-
wrap表示该轴线排不下的时候换行
image.png
-
wrap-reverse换行且第一行在下方
image.png
3.flex-flow是flex-direction和flex-wrap的简写
用法为：flex-flow:column wrap,默认值为flex-flow:row nowrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
height:300px;
width: 800px;
background-color: gainsboro;
display: flex;
flex-flow: column wrap;
}
.div1{
height: 100px;
margin-top: 10px;
margin-left: 10px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="div">
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
</div>
</body>
</html>
image.png
4.
align-items规定了其在交叉轴的对齐方式。
-
stretch：如果盒子未设置高度或设为auto，将占满整个容器的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
height:300px;
width:900px;
background-color: gainsboro;
display: flex;
flex-direction: row;
align-items:stretch;
}
.div1{
/* height: 100px; */
margin-top: 10px;
margin-left: 10px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="div">
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
</div>
</body>
</html>
image.png
-
flex-start：交叉轴的起点
image.png
-
flex-end：交叉轴的终点
image.png
-
center：交叉轴的中点
image.png
6.justify-content规定其在主轴上的对齐方式 -
flex-start：左对齐，也是默认值
image.png
-
flex-end右对齐
image.png
-
space-between两端对齐，盒子之间的间隔都相等
image.png
-
space-around每个盒子两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
image.png
-
center居中
image.png
emmmm,先就酱，后续补上啊啊啊
