一、什么是Flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
自适应屏幕。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
二、容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
三、项目的属性
以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
四、双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header,footer{
background-color: #00FF00;
height: 80px;
}
#main{
background-color: #00F7DE;
flex-grow: 1;
display: flex;
}
#mainContent{
background-color: #0000FF;
flex-grow: 1;
}
#left,#right{
background-color: brown;
width: 250px;
flex-shrink: 0;
}
</style>
</head>
<body>
<header>头部</header>
<div id="main">
<div id="left">左侧</div>
<div id="mainContent"></div>
<div id="right">右侧</div>
</div>
<footer>底部</footer>
</body>
</html>
效果
2686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
