Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
.box{ display: flex; //行内元素也可以使用flex布局 //display: inline-flex; }
display: flex;
使元素呈现为块级元素,占据整行空间,除非使用width
或height
等属性指定其大小。所有子元素将按照弹性盒子的规则进行布局。display: inline-flex;
使元素呈现为一个行内元素,可以与其他元素在同一行上显示。其子元素也将按照弹性盒子的规则进行布局 。
设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
flex属性
父元素属性
- flex-direction
flex-direction
属性决定主轴的方向 默认值为row
flex-direction: row | row-reverse | column | column-reverse; - flex-wrap
flex-wrap
决定子元素换行 默认值为nowarp
flex-wrap: nowrap | warp | wrap-reverse - flex-flow
flex-direction和flex-wrap的复合属性 ****row nowrap
flex-flow
: <flex-direction> | <flex-wrap> justify-content
属性定义了项目在主轴上的对齐方式;
justify-content: flex-start | flex-end | center | space-between | space-aroundalign-items
属性决定了侧轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
align-content
多行子容器在交叉轴上的对齐方式,首先的前提是它要满足换行
align-content :flex-start | flex-end | center | space-between | space-around | stretch- gap 属性决定了主轴子元素之间的间隔
gap: <number>
子元素属性
- order : 自定义排序,设置
order
可以按照由小到大进行排列
order: <integer> - align-self 单独设置子容器的交叉轴排列方式
align-self: flex-start | flex-end | center | baseline | stretch - flex-basis表示当子容器不伸缩的状态时,也就是没有设置 flex: 数字的弹性情况下的原始尺寸,默认为auto,item本来的大小
flex-basis: <length> | auto - flex-grow 属性定义项目的放大比例,默认为
0
,即如果存在剩余空间,也不放大。
flex-grow: <number> - flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-shrink: <number>
flex: 属性是flex-grow
,flex-shrink
和flex-basis
的复合属性
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
flex: 1
flex:1
= flex: 1 1 0%;
flex:1在父元素尺寸不足的时候,会优先最小化内容尺寸。
flex:auto
flex:auto = flex: 1 1 auto
flex:auto在父元素尺寸不足的时候,会优先最大化内容尺寸。
flex: 0
flex:0
= flex: 0 1 0%;
flex:0 :通常表现为内容最小化宽度,不会充分的分配容器的尺寸。
flex:none
flex:none
= flex:0 0 auto;
flex:none;表示元素的大小由内容决定,但是flex-grow,flex-shrink都是0,元素没有弹性,通常表现为内容最大化宽度
,也许会溢出容器。
所以在日常开发中使用flex:1和 flex:auto比较多
快速练习和使用
CSS3 Flexbox 在线演示
一些布局使用
全屏布局
<div class="fullscreen">
<header></header>
<main></main>
<footer></footer>
</div>
css
.fullscreen {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
header {
height: 100px;
background-color: yellow;
}
footer {
height: 100px;
background-color: black;
}
main {
flex: 1;
background-color: blue;
}
圣杯和双飞翼布局
<div class="grail">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.grail {
display: flex;
height: 100vh;
width: 100vw;
}
.right {
width: 100px;
background-color: blue;
}
.left {
width: 100px;
background-color: red;
}
.center {
flex: 1;
background-color: yellow;
}
两列布局(一列固定,一列自适应)
<div class="two-column">
<div class="left"></div>
<div class="right"></div>
</div>
css
.two-column {
display: flex;
height: 100vh;
width: 100vw;
}
.left {
width: 100px;
background-color: blue;
}
.right {
flex: 1;
background-color: red;
}
综合案例
![[Pasted image 20240106110443.png]]
<div class="container">
<div class="part1">
<div class="part1-left">
</div>
<div class="part1-right">
</div>
</div>
<div class="part2">
<div class="part2-top">
</div>
<div class="part2-middle">
</div>
<div class="part2-bottom">
<div class="part2-inputBar">
</div>
<div class="part2-inputBtn">
</div>
</div>
</div>
<div class="part3">
<div class="part3-top"></div>
<div class="part3-middle">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="part3-bottom"></div>
</div>
</div>
css
body {
font-size: small;
height: 100vh;
width: 100vw;
margin: 0;
background-color: rgb(216, 216, 216);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
div {
border: 1px red solid;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
width: 1200px;
background-color: white;
/* margin-top: 20px; */
padding: 30px 40px;
box-sizing: border-box;
}
.part1 {
height: 100px;
width: 1100px;
display: flex;
justify-content: space-between;
align-items: center;
/* margin-top: 10px; */
}
.part2 {
height: 300px;
width: 1100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.part1-left {
height: 80px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.part1-right {
height: 80px;
width: 300px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.part2-top {
margin-top: 2px;
width: 800px;
height: 100px;
}
.part2-middle {
width: 400px;
height: 100px;
font-size: 20px;
}
.part2-bottom {
width: 300px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.part3 {
height: 300px;
width: 1100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.part3-top {
margin-top: 2px;
width: 600px;
height: 30px;
}
.part3-middle {
width: 1000px;
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
}
.part3-bottom {
margin-bottom: 2px;
width: 300px;
height: 50px;
}
.card {
height: 180px;
width: 180px;
}