Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019年12月23日 作业 弹性盒子
Blogger Information
Blog 7
fans 0
comment 2
visits 5455
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019年12月23日 作业 弹性盒子
L
Original
867 people have browsed it

一、flex 弹性盒子/弹性容器

1.flex-direction 设置容器主轴方向

  1. flex-direction: row; /* 横向或水平 */
  2. flex-direction: column; /* 纵向或垂直 */

2.flex-wrap 是否允许换行显示

  1. flex-wrap: nowrap; /* 不允许换行 */
  2. flex-wrap: wrap; /* 允许换行 */

3.flex-flow 主轴方向与换行组合简写

  1. flex-flow: row wrap; /* 横向并允许换行 */
  2. ...

4.justify-content 元素在主轴上的排列与对齐方式

  1. justify-content: stretch; /* 将空间平均分配给元素（老师暂未提及，经查阅资料得知） */
  2. justify-content: flex-start; /* 元素紧靠主轴起点 */
  3. justify-content: flex-end; /* 元素紧靠主轴终点 */
  4. justify-content: center; /* 元素从弹性容器中心开始 */
  5. justify-content: space-between; /* 两端对齐，第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 */
  6. justify-content: space-around; /* 分散对齐，每个元素两侧的间隔相等，元素之间的间隔比元素与边框的间隔大一倍 */
  7. justify-content: space-evenly; /* 平均对齐，元素之间的间隔平均分配 */

5.元素在交叉轴上的排列方式

  1. align-items: stretch; /* 元素被拉伸以适应容器（老师暂未提及，经查阅资料得知） */
  2. align-items: flex-start; /* 元素位于容器交叉轴的起点 */
  3. align-items: flex-end; /* 元素位于容器交叉轴的终点 */
  4. align-items: center; /* 元素位于容器的中心 */

6.多行显示的弹性容器，元素在交叉轴上的排列方式

  1. align-content: stretch; /* 将空间平均分配给元素（老师暂未提及，经查阅资料得知） */
  2. align-content: flex-start; /* 元素紧靠主轴起点 */
  3. align-content: flex-end; /* 元素紧靠主轴终点 */
  4. align-content: center; /* 元素从弹性容器中心开始 */
  5. align-content: space-between; /* 两端对齐，第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 */
  6. align-content: space-around; /* 分散对齐，每个元素两侧的间隔相等，元素之间的间隔比元素与边框的间隔大一倍 */
  7. align-content: space-evenly; /* 平均对齐，元素之间的间隔平均分配 */

二、flex案例

demo1

预览图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.         <title>flex体验</title>
  8.         <style>
  9.             .container {
  10.                 width: 500px;
  11.                 margin: auto;
  12.                 height: 300px;
  13.                 outline: 1px dashed lightcoral;
  14.             }
  15.             .item {
  16.                 width: 300px;
  17.                 height: 150px;
  18.                 line-height: 150px;
  19.                 text-align: center;
  20.                 outline: 1px dashed lightgreen;
  21.             }
  22.             .container.tradition {
  23.                 position: relative;
  24.             }
  25.             .item.tradition {
  26.                 position: absolute;
  27.                 top: 0;
  28.                 right: 0;
  29.                 bottom: 0;
  30.                 left: 0;
  31.                 margin: auto;
  32.             }
  33.             .container.flex {
  34.                 display: flex;
  35.                 justify-content: center;
  36.                 align-items: center;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <div class="container tradition">
  42.             <div class="item tradition">传统</div>
  43.         </div>
  44.         <hr />
  45.         <div class="container flex">
  46.             <div class="item flex">flex</div>
  47.         </div>
  48.     </body>
  49. </html>

demo2

预览图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.         <title>flex</title>
  8.         <style>
  9.             .container {
  10.                 width: 800px;
  11.                 margin: auto;
  12.                 height: 500px;
  13.                 outline: 1px dashed lightblue;
  14.                 background-color: lightsalmon;
  15.                 display: flex;
  16.                 /* flex-direction: row; */
  17.                 /* flex-wrap: nowrap; */
  18.                 flex-flow: row wrap;
  19.                 justify-content: space-around;
  20.                 /* align-items: center; */
  21.                 align-content: space-around;
  22.             }
  23.             .item {
  24.                 width: 180px;
  25.                 text-align: center;
  26.                 height: 120px;
  27.                 line-height: 120px;
  28.                 outline: 1px dashed lightgreen;
  29.                 color: #fff;
  30.                 background-color: lightslategray;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div class="container">
  36.             <div class="item">1</div>
  37.             <div class="item">2</div>
  38.             <div class="item">3</div>
  39.             <div class="item">4</div>
  40.             <div class="item">5</div>
  41.             <div class="item">6</div>
  42.             <div class="item">7</div>
  43.         </div>
  44.     </body>
  45. </html>

三、2019年12月20日作业问题及体会

问题：属性选择器采用精准定位
体会：2019年12月20日作业采用的是浮动float，相较flex而言，css代码较多，而flex拥有更简洁高效的方式去实现相同的效果，体现最为明显的是垂直居中，传统方式需要使用绝对定位，而flex方式在交叉轴上使用排列方式即可实现，效率更高

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex确实比较方便, 好好学吧
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post