单行的时候文本不足会居中，多行会自动折行居左
display: flex;
flex-direction: row;
justify-content: center;
页面高度不足时，在底部显示；页面高度超出时，随页面滚动
display: flex;
flex-direction: column;
justify-content: space-between;
flex的子元素分布比例
flex属性的默认值为：0 1 auto（不放大会缩小）三个参数：flex-grow、flex-shrink、flex-basis
flex-grow：定义子元素的放大比例
flex-basis：定义元素的基础宽度,覆盖width
flex-shrink：定义子元素的缩小比例
一种是子元素的宽是相同的.即flex:1
三个子元素宽是不同的.即flex设置为不同的比例
有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例
<style>
.flex {
display: flex;
}
.flex div {
height: 200px;
background:rebeccapurple;
margin: 10px;
flex: 1;/* 一种是子元素的宽是相同的.即flex:1 */
}
.flex1 {
display: flex;
}
.flex1 div {
height: 200px;
background: goldenrod;
margin: 10px;
}
.flex1 .right,.left {
flex: 1;/* 三个子元素宽是不同的.即flex设置为不同的比例 */
}
.flex1 .center {
flex: 4;/* 三个子元素宽是不同的.即flex设置为不同的比例 */
}
.flex2 {
display: flex;
}
.flex2 div {
height: 200px;
background: green;
margin: 10px;
}
.flex2 .right {
flex: 200px;/* 有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例 */
}
.flex2 .center {
flex: 5;/* 有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例 */
}
.flex2 .left {
flex: 1;/* 有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例 */
}
.font{
color: aliceblue;
text-align: center;
line-height: 200px;
}
</style>
<div class="flex">
<div class="right font">一种是子元素的宽是相同的.即flex:1</div>
<div class="center font">flex: 1;</div>
<div class="left font">flex: 1;</div>
</div>
<div class="flex1">
<div class="right font">flex: 1;</div>
<div class="center font">flex: 4;三个子元素宽是不同的.即flex设置为不同的比例</div>
<div class="left font">flex: 1;</div>
</div>
<div class="flex2">
<div class="right font">flex: 200px;</div>
<div class="center font">flex: 5;有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例</div>
<div class="left font">flex: 1;</div>
</div>
flex.png
实例html：
<title>内容不足时页脚在底部</title>
<style>
html,body{
height: 100%;
}
.page{
/* flex方法 */
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
/* 定位方法 */
}
.mian{
background-color: blueviolet;
}
.liner{
display: flex;
flex-direction: row;
justify-content: center;
}
.footer{
width: 100%;
background-color: green;
}
</style>
<div class="page">
<div class="mian">
页面内容
<div class="liner">
单行文本居中，多行文本居左显示
</div>
</div>
<div class="footer">
页面高度不足时，在底部显示；页面高度超出时，随页面滚动footer
</div>
</div>
多行.png
单行.png
需要注意的是任何容器都可以指定为flex布局，但是在flex布局中float、clear、vertical-align都会失效。
主轴方向
flex容器分为x轴与y轴，x轴正方向默认从左至右，y轴正方向默认从上到下。
定义一个容器为弹性布局display:flex;主轴默认方向为左到右；
如果想去改变flex的默认方向，就需要用到flex-direction属性
flex-direction有四个属性值，分别是row、row-reverse、column、column-reverse，分别为从左到右、从右到左、从上到下、从下到上
父元素身上的属性:
主轴方向的对齐方式
justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离
纵向单行对齐方式
align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式
子项目换行
flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行
纵向多行对齐方式
align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around
子项目的一些属性:
order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值
flex:flex-grow flex-shrink flex-basis
网友评论