> 文档中心 > 从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)

从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)


从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day19)

复习:从零开始学前端:字体图标的引入 — 今天你学习了吗?(Day18)

文章目录

  • 从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day19)
    • 前言
    • 第十九节课:弹性盒模型(flex布局)
      • 一、弹性盒模型(flex布局)
        • 1. 弹性容器
        • 2. 弹性元素
        • 3.弹性盒子属性值:inline-flex和flex的区别
      • 二、弹性盒模型的属性
        • 1.flex伸展属性
        • 2.flex-shrink属性
        • 3.flex-wrap属性
        • 4.flex-direction属性
        • 5.flex-flow属性
        • 6.justify-content属性
        • 7.align-content属性
        • 8.align-items属性
        • 9. align-self属性
        • 10.flex-basis属性
        • 11.felx属性
        • 12. order属性
      • 十、练习

前言

补的有些粗糙了,之后有时间会继续完善~

第十九节课:弹性盒模型(flex布局)

一、弹性盒模型(flex布局)

flex(弹性盒、伸缩盒)
弹性盒是CSS3的一种新的布局模式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

  • 是CSS中的一种布局手段,它主要用来代替浮动来完成页面的布局
  • flex可以使元素更具有弹性,让元素可以跟随页面的大小的改变而改变

弹性盒模型分为,【弹性容器】和【弹性元素

1. 弹性容器

之前我们学到了将元素转变其他的模式就是使用display这个属性,那么今天将元素转变为弹性元素也是一样使用这个属性,直接使用display:flex;,就使用flex布局了。

2. 弹性元素

当我们把父元素设置为弹性容器之后,那么他的直接子元素(注意只有子元素,即亲儿子)就会自动变为弹性元素。
注意:弹性元素可以同时是弹性容器也可以是弹性元素。

3.弹性盒子属性值:inline-flex和flex的区别

  • inline-flex:弹性盒子与非弹性盒子在同一行显示(规定弹性盒子为行内块元素)
  • flex:弹性盒子与非弹性盒子不在同一行显示(规定弹性盒子为块元素)

实例:

flex:
在这里插入图片描述
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>弹性容器</title>    <style> .one{     height: 200px;     width: 200px;     background-color: palegoldenrod;     /* 块级元素 */     display: flex; }    </style></head><body>    <div class="one"> <div>1</div> <div>2</div> <div>3</div> <div>4     <p>5</p> </div>    </div>    465</body></html>

inline-flex:
在这里插入图片描述
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>弹性容器</title>    <style> .one{     height: 200px;     width: 200px;     background-color: palegoldenrod;     /* 行内块元素 */     display: inline-flex; }    </style></head><body>    <div class="one"> <div>1</div> <div>2</div> <div>3</div> <div>4     <p>5</p> </div>    </div>    465</body></html>

二、弹性盒模型的属性

1.flex伸展属性

flex-grow:【制定弹性元素的伸展系数】

flex-grow制定弹性元素的伸展系数(写在子元素里面的)当父元素有多余的空间时,子元素如何伸展父元素和按照比例进行分配,默认为0;

实例1:

子元素平均伸展:
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)奇数与偶数元素3:7
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> .box{     width: 900px;     height: 100px;     border: 5px solid tomato;     background-color: yellowgreen;     display: flex; } .box>div{     /* 子元素平均伸展 */     /* flex-grow: 1; */ } /* odd奇数 */ .box>div:nth-child(odd){     height: 100px;     width: 100px;     background-color: pink;     /* 奇数占比3 */     flex-grow: 3; } /* even偶数 */ .box>div:nth-child(even){     height: 100px;     width: 100px;     background-color: skyblue;     /* 偶数占比7 */     flex-grow: 7; }    </style></head><body>    <div class="box"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div>    </div></body></html>

实例2

之前的练习:W3C导航条
弹性盒模型>浮动,
浮动:父盒子会高度塌陷
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> ul,li{     list-style: none;     /* flex-grow: 1; */     margin: 0;     padding: 0; } ul{      width: 900px;     height: 60px;     margin: 100px auto;     background-color: rgb(232,231,227);     display: flex;     /* 子元素继承行高 */     line-height: 60px; } /* 子元素伸展为1 */ ul li{     flex-grow: 1; } /* ul>li:nth-child(odd){     background-color: skyblue; } ul>li:nth-child(even){     background-color: pink; } */ ul li a{     text-align: center;     display: block;     /* line-height: 48px; */     color: gray;     text-decoration: none;     /* font-size: 20px; */ } ul li a:hover{     background-color: rgb(63,63,63);     color: aliceblue; }    </style></head><body>    <ul class="box"> <li>     <a href="">HTML/CSS</a> </li> <li>     <a href="">Browser Side</a> </li> <li>     <a href="">Server Side</a> </li> <li>     <a href="">Programming</a> </li> <li>     <a href="">XML</a> </li> <li>     <a href="">Web Building</a> </li> <li>     <a href="">Reference</a> </li>    </ul></body></html>

2.flex-shrink属性

flex-shrink:指定弹性元素的收缩系

flex-shrink指定弹性元素的收缩系(给子元素的)当父元素的空间不足以容纳所有的子元素的时候,对子元素进行收缩。默认值为1,当值为0的时候,就会溢出。

实例:

正好于flex-grow相反:
平均收缩:
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)
收缩奇:偶=3:6
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> .box {     width: 400px;     height: 100px;     border: 5px solid tomato;     background-color: yellowgreen;     display: flex; } .box>div {     /* 子元素平均伸展 */     /* flex-grow: 1; */     /* 子元素平均收缩 */     /* flex-shrink: 1; */ } /* odd奇数 */ .box>div:nth-child(odd) {     height: 100px;     width: 100px;     background-color: pink;     /* 奇数占比3 */     /* flex-grow: 3; */     /* 收缩系数 */     flex-shrink: 3; } /* even偶数 */ .box>div:nth-child(even) {     height: 100px;     width: 100px;     background-color: skyblue;     /* 偶数占比7 */     /* flex-grow: 7; */     /* 收缩系数 */     flex-shrink: 7; }    </style></head><body>    <div class="box"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> <div>div6</div>    </div></body></html>

3.flex-wrap属性

flex-wrap:设置弹性元素是否在弹性容器中自动换行

flex-wrap设置弹性元素是否在弹性容器中自动换行(给父元素的)属性值:nowrap默认值,不会换行。

  • wrap元素沿着辅轴方向换行
  • wrap-reverse元素沿着辅轴反方向换行

第四个属性flex-direction规定主轴辅轴

实例:

wrap:
在这里插入图片描述
wrap-reverse:
在这里插入图片描述
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> .box {     width: 400px;     border: 5px solid tomato;     display: flex;     flex-wrap: wrap;     /* flex-wrap: wrap-reverse; */ } .box>div {     /* 子元素平均伸展 */     /* flex-grow: 1; */     /* 子元素平均收缩 */     flex-shrink: 0; } /* odd奇数 */ .box>div:nth-child(odd) {     height: 100px;     width: 100px;     background-color: pink;     /* 奇数占比3 */     /* flex-grow: 3; */     /* 收缩系数 */     /* flex-shrink: 3; */ } /* even偶数 */ .box>div:nth-child(even) {     height: 100px;     width: 100px;     background-color: skyblue;     /* 偶数占比7 */     /* flex-grow: 7; */     /* 收缩系数 */     /* flex-shrink: 7; */ }    </style></head><body>    <div class="box"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> <div>div6</div>    </div></body></html>

4.flex-direction属性

flex-direction:设置指定容器弹性元素的排列方式(更改主轴和辅轴)

flex-direction设置指定容器弹性元素的排列方式(给父元素的),设置主轴和辅轴的方向
属性值:
row:默认值,弹性元素在容器中水平排列(自左向右)
row-reverse:弹性元素在容器中的反方向排列(自右向左)
column:弹性元素纵向排列(自上向下)
column-reverse:弹性元素反向纵向排列(自下向上)

实例:

row(自左向右):
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)
row-reverse(自右向左):
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)
column(自上而下):
在这里插入图片描述
column-reverse(自下而上):
在这里插入图片描述
代码:

 .box {     margin: auto;     width: 400px;     /* height: 400px; */     border: 5px solid tomato;     display: flex;     /* 辅轴正方向 */     /* flex-wrap: wrap; */     /* 辅轴反方向 */     /* flex-wrap: wrap-reverse; */     /* 自上而下 */     /* flex-direction: column; */     /* 自下而上 */     /* flex-direction: column-reverse; */     /* 自左向右 */     /* flex-direction: row; */     /* 自右向左 */     flex-direction: row-reverse; }

5.flex-flow属性

flex-flow:是flex-wrap和flex-direction的简写属性

flex-flow:是flex-wrap和flex-direction的简写属性
例:
flex-flow:row wrap;
元素在一行显示,并且会自动换行,二者之间没有顺序。

实例:
在这里插入图片描述
代码:

 .box {     margin: auto;     width: 400px;     height: 300px;     border: 5px solid tomato;     display: flex;     flex-flow: wrap column; }

6.justify-content属性

justify-content:设置元素的排列方式,如何分配主轴上的空白空间(主轴上的元素如何排列)

属性值都是在父元素盒子里面写的。
属性值:

  • flex-start------元素沿着主轴起点排列(默认值)
  • flex-end------元素沿着终点排列
  • center------元素居中排列
  • space-around------空白分布到元素两侧
  • space-between------空白均匀分布到元素之间
  • space-evenly------空白分布到元素的单侧。

flex-start:
在这里插入图片描述
flex-end:
在这里插入图片描述
space-between:
在这里插入图片描述
space-around和space-evenly
请添加图片描述space-around和space-evenly区别:
https://blog.csdn.net/zjy660358/article/details/113935300

7.align-content属性

align-content:如何分配辅轴上的空白空间(给父元素的)

属性值:

  • center------元素在中间,上下空间分布一样。
  • flex-start------元素在上边,空间分布在下边
  • flex-end------元素分布在下边,空白分布在上边
  • space-around------空白分布在两边
  • space-between------空白分布在元素的中间

与justify-content用法一样:

实例:
在这里插入图片描述
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>justify-content属性</title>    <style> .one {     width: 350px;     height: 350px;     border: 2px solid tomato;     display: flex;     flex-wrap: wrap;     justify-content: space-between;     align-content: space-between; } .one>div{     width: 100px;     height: 100px; } .one>div:nth-child(odd) {     background-color: pink; } .one>div:nth-child(even) {     background-color: skyblue; }    </style></head><body>    <div class="one"> <div>     div1 </div> <div>     div2 </div> <div>     div3 </div> <div>     div4 </div> <div>     div5 </div> <div>div6</div> <div>div7</div> <div>div8</div> <div>div9</div> <!-- 
div10
-->
</div></body></html>

8.align-items属性

align-item:设置元素在辅轴上如何对齐,元素之间的关系(给父元素的)
属性值:

  • stretch------默认值
  • flex-start------元素不会拉伸,沿着辅轴的起点对齐
  • flex-end------元素不会拉伸,沿着辅轴的重点对齐
  • center------居中对齐
  • baseline------基线对齐

实例:
在这里插入图片描述

9. align-self属性

align-self:(给子元素

一般是使用在单个元素上面用来覆盖align-item属性的
所以align-self的属性值和align-items的属性值一样。

实例:
奇数设置align-self:flex-start;
在这里插入图片描述
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>align-self属性</title>    <style> .one {     width: 350px;     height: 350px;     border: 2px solid tomato;     display: flex;     flex-wrap: wrap;     /* align-items: flex-start; */     /* align-items: flex-end; */     align-items: center; } .one>div {     width: 100px;     /* height: 100px; */ } .one>div:nth-child(odd) {     background-color: pink;     align-self: flex-start; } .one>div:nth-child(even) {     background-color: skyblue; }    </style></head><body>    <div class="one"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> <div>div6</div> <div>div7</div> <div>div8</div> <div>div9</div>    </div></body></html>

10.flex-basis属性

flex-basis:(给子元素

指定元素在主轴上的基础长度。如果主轴是纵向的,则该指定的就是元素的高度。
默认值为auto,表示参考元素自身的高度或宽度,如果传递的是一个具体的数值,则以该值为准

实例:
偶数长度改成110px
在这里插入图片描述
代码:

 .one>div:nth-child(even) {     background-color: skyblue;     flex-basis: 110px; }

11.felx属性

flex:(给子元素
三个弹性元素的简写法:
flex:flex-grow flex-shrink flex-basis (增长 缩减 基础)

属性值:
initial:就相当于 flex: 0 1 auto;
auto:相当于 flex: 1 1 auto;
none:相当于 flex: 0 0 auto; 元素没有弹性

12. order属性

order:(给子元素
决定弹性元素的排列顺序
属性值为自然数。

注意:order的值越小越往前。

实例:
从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(Day19)
代码:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>align-self属性</title>    <style> .one {     width: 400px;     border: 2px solid tomato;     display: flex;     flex-wrap: wrap; } .one>div {     width: 100px;     height: 100px; } .one>div:nth-child(odd) {     background-color: pink; } .one>div:nth-child(even) {     background-color: skyblue; } .one>div:nth-child(1) {     order: 4; }  .one>div:nth-child(2) {     order: 2; }  .one>div:nth-child(3) {     order: 1; }  .one>div:nth-child(4) {     order: 3; }    </style></head><body>    <div class="one"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div>    </div></body></html>

十、练习

使用本次所学内容做。
待定html:

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>OPPO商城列表</title>    <style> body {     background-color: rgb(233, 233, 250); } .contain {     width: 1248px;     height: 300px;     /* background-color: skyblue; */     margin: 100px auto;     display: flex;     flex-wrap: wrap;     justify-content: space-between;     align-content: space-between; } .contain a {     width: 300px;     height: 130px;     background-color: white;     /* 默认收缩 */     flex-shrink: 0;     display: flex;     color: black;     text-decoration: none;     border-radius: 5px;     overflow: hidden; } /* 图片 */ /* .contain a img {     width: 130px;     height: 130px; } */ /* 背景 */ .contain a>.img1 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/1.webp);     background-size: contain; } .contain a>.img2 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/2.webp);     background-size: contain; } .contain a>.img3 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/3.webp);     background-size: contain; } .contain a>.img4 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/4.webp);     background-size: contain; } .contain a>.img5 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/5.webp);     background-size: contain; } .contain a>.img6 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/6.webp);     background-size: contain; } .contain a>.img7 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/7.webp);     background-size: contain; } .contain a>.img8 {     width: 130px;     height: 130px;     background: url(../../oppo商城素材/商品展示/8.webp);     background-size: contain; } .contain a .txt {     width: 170px;     height: 130px;     padding: 20px 20px 0 0;     box-sizing: border-box; } .contain a .txt .txt1 {     font-size: 17px; } .contain a .txt .txt2 {     font-size: 14px;     opacity: .5;     line-height: 29px; } .contain a .txt .txt3 {     font-size: 22px;     color: #f44336;     margin-top: 10px; }    </style></head><body>    <div class="contain"> <a href="">     <div class="img img1"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="Find X5 Pro">Find X5 Pro</div>  <div class="txt2" title="赠298尊享礼盒">赠298尊享礼盒</div>  <div class="txt3">¥6299</div>     </div> </a> <a href="">     <div class="img img2"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="Reno7">Reno7</div>  <div class="txt2" title="至高立减100元">至高立减100元</div>  <div class="txt3">¥2599</div>     </div> </a> <a href="">     <div class="img img3"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="Find N">Find N</div>  <div class="txt2" title="立即预约">立即预约</div>  <div class="txt3">¥8999</div>     </div> </a> <a href="">     <div class="img img4"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="一加 10 Pro">一加 10 Pro</div>  <div class="txt2" title="24期免息">24期免息</div>  <div class="txt3">¥5799</div>     </div> </a> <a href="">     <div class="img img5"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="K9 Pro">K9 Pro</div>  <div class="txt2" title="至高立减300元">至高立减300元</div>  <div class="txt3">¥1899</div>     </div> </a> <a href="">     <div class="img img6"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="Find X5">Find X5</div>  <div class="txt2" title="赠198元尊享礼盒">赠198元尊享礼盒</div>  <div class="txt3">¥3999</div>     </div> </a> <a href="">     <div class="img img7"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="K9x">K9x</div>  <div class="txt2" title="积分可抵50元">积分可抵50元</div>  <div class="txt3">¥1399</div>     </div> </a> <a href="">     <div class="img img8"></div>     <!--  -->     <div class="txt">  <div class="txt1" title="K9s">K9s</div>  <div class="txt2" title="至高立减200元">至高立减200元</div>  <div class="txt3">¥1699</div>     </div> </a>    </div></body></html>

预习:从零开始学前端:过渡和动画 — 今天你学习了吗?(Day20)

------人天天都学到一点东西,而往往所学到的是发现昨日学到的是错的。