css—flex布局（实战篇）⽂章⽬录
容器属性：
flex-direction ——项⽬⽔平⽅向
flex-wrap ——项⽬是否换⾏
flex-flow ——前两个缩写，默认为：从左到右、不换⾏
justify-content ——项⽬的⽔平对齐⽅式
align-items ——项⽬的垂直对齐⽅式
align-content ——项⽬整体、之间的对齐⽅式
项⽬属性：
order ——项⽬的排列顺序
flex-grow ——等⽐例放⼤ (为1：则将等分剩余空间)
flex布局对齐方式flex-shrink ——缩⼩⽐例(为1: 如果空间不⾜，该项⽬将缩⼩)
flex-basis ——⼤⼩(auto: 项⽬的本来⼤⼩)
flex ——前三个属性简写 (默认值为 0 1 auto。后两个属性可选)
align-self ——允许单个项⽬有与其他项⽬对齐⽅式不⼀样。————————————————————————————
题⽬：假设⾼度已知，请写出三栏布局，其中左栏、右栏宽度各为300px；中间⾃适应。1.flex布局：
<style>
html *{
margin:0;
padding:0;
}
.layout article div {
min-height:100px;
//该属性值会对元素的⾼度设置⼀个最低限制}
.layout.flex .left-center-right {
display: flex;
}
.layout.flex .left {
width:300px;
background: red;
}
.layout.flex .center {
flex:1;
/
/单个⽐例缩放。
background: yellow;
}
.layout.flex .right {
width:300px;
background: blue;
}
</style>
//flex-wrap：默认不换⾏，则在⼀⾏上。
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flex布局</h2>
1、flex布局左右固定宽度，中间⾃适应
2、flex布局左右固定宽度，中间⾃适应
</div>
<div class="right"></div>
</article>
</section>
2.浮动
padding:0;
}
.
layout article div {
min-height:100px;
}
.layout.float .left {
float: left;
background: red;
width:300px;
}
.layout.float .right {
float: right;
background: blue;
width:300px;
}
.layout.float .center {
background: yellow;
//直接设置颜⾊，则下⾯⼀排是该颜⾊，
//左右的设置了浮动，则挡住了左右的部分
//最后显⽰的效果是中间黄⾊
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动布局</h2>
1、浮动布局左右固定宽度，中间⾃适应
2、浮动布局左右固定宽度，中间⾃适应
</div>
</article>
</section>
3.绝对定位
padding:0;
}
.
layout article div {
min-height:100px;
}
.layout.position .left-center-right>div {
position: absolute;
}
.layout.position .left {
left:0;
width:300px;
background: red;
}
.
layout.position .right {
right:0;
width:300px;
background: blue;
}
.layout.position .center {
left:300px;
right:300px;
background: yellow;
//左右都留300px即可
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位</h2>
1、定位布局左右固定宽度，中间⾃适应
2、定位布局左右固定宽度，中间⾃适应
</div>
<div class="right"></div>
</article>
</section>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。