flex吃干抹净

Flex 布局是什么?

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

.box{
  display: flex;
  //行内元素也可以使用flex布局
  //display: inline-flex;
}
  • display: flex; 使元素呈现为块级元素,占据整行空间,除非使用 width 或 height 等属性指定其大小。所有子元素将按照弹性盒子的规则进行布局。
  • display: inline-flex; 使元素呈现为一个行内元素,可以与其他元素在同一行上显示。其子元素也将按照弹性盒子的规则进行布局 。
    设为 Flex 布局以后,子元素的floatclearvertical-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-around
  • align-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-growflex-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;

}

文章到这里就结束了,文章更多作为自我学习,也希望对你有所帮助,有错欢迎指出。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值