flex布局有什么作用常用属性

发布网友发布时间：2022-04-06 11:45

共2个回答

懂视网时间：2022-04-06 16:06

本篇文章给大家带来的内容是关于flex多列布局有哪些？flex四种多列布局的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

基本的等分三列布局

.container{
 display: flex;
 width: 500px;
 height: 200px;
 }
 .left{
 flex:1;
 background: red;
 }
 .middle{
 flex:1;
 background: green;
 }
 .right{
 flex:1;
 background: blue;
 }
<div class="container">
 <div class="left"></div>
 <div class="middle"></div>
 <div class="right"></div>
</div>

三列左中定宽右侧自适应

 .container{
 display: flex;
 height: 300px;
 }
 .left{
 flex: 0 0 100px;
 background-color: red;
 }
 .middle{
 flex: 0 0 100px;
 background-color: green;
 }
 .right{
 flex:1;
 background-color: blue;
 }
 <div class="container">
 <div class="left">qqq</div>
 <div class="middle">qqq</div>
 <div class="right">wwww</div>
</div>

缩小浏览器窗口后

## 左右固定，中间自适应 ##

 .container{
 display: flex;
 height: 300px;
 }
 .left{
 width: 100px;
 background-color: red;
 }
 .middle{
 flex: 1;
 background-color: green;
 }
 .right{
 width: 100px;
 background-color: blue;
 }
 <div class="container">
 <div class="left">qqq</div>
 <div class="middle">qqq</div>
 <div class="right">wwww</div>
</div>

缩小浏览器窗口后

九宫格布局

 .container{
 display: flex;
 height: 300px;
 width: 300px;
 flex-direction: column;
 }
 .row{
 display: flex;
 height: 100px;
 }
 .left{
 flex: 1;
 height: 100px;
 border: 1px solid red;
 }
 .middle{
 flex: 1;
 height: 100px;
 border: 1px solid green;
 }
 .right{
 flex: 1;
 height: 100px;
 border: 1px solid blue;
 }
 <div class="container">
 <div class="row">
 <div class="left"></div>
 <div class="middle"></div>
 <div class="right"></div>
 </div>
 <div class="row">
 <div class="left"></div>
 <div class="middle"></div>
 <div class="right"></div>
 </div>
 <div class="row">
 <div class="left"></div>
 <div class="middle"></div>
 <div class="right"></div>
 </div>
</div>

圣杯布局

 *{
 margin:0;
 padding:0;
 }
 .container{
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 justify-content: space-between;
 }
 .header{
 background: red;
 flex: 0 0 100px;
 }
 .content{
 display: flex;
 flex:1;
 }
 .content-left{
 flex: 0 0 100px;
 background: green;
 }
 .content-right{
 flex: 0 0 100px;
 background: pink;
 }
 .content-middle{
 flex:1;
 }
 .footer{
 background: yellow;
 flex: 0 0 100px;
 }
 <div class="container">
 <div class="header">Header</div>
 <div class="content">
 <div class="content-left">Left</div>
 <div class="content-middle">Center</div>
 <div class="content-right">Right</div>
 </div>
 <div class="footer">Footer</div>
</div>

缩小浏览器窗口之后

热心网友时间：2022-04-06 13:14

1.以下6个属性设置在容器上
flex-direction row/row-reverse/column/column-reverse 决定主轴的方向（即项目的排列方向）
flex-wrap wrap/nowrap/wrap-reverse 决定项目排列方式
flex-flow <flex-direction>|<flex-wrap> 前两者简写形式，默认flex-flow:row nowrap
justify-content flex-start/flex-end/center/space-between/space-around
决定项目在主轴的对齐方式
* space-between：两端对齐，项目之间的间隔都相等。
* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items flex-start/flex-end/center/baseline/stretch
定义项目在交叉轴上如何对齐
* baseline: 项目的第一行文字的基线对齐。
* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content flex-start/flex-end/center/space-between/space-around/stretch 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex布局有什么作用 常用属性

flex布局有什么作用常用属性