简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1223作业+Flex小案例（flex容器的6大属性）+10期线上培训
Blogger Information
Blog 25
fans 1
comment 1
visits 17284
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
1223作业+Flex小案例（flex容器的6大属性）+10期线上培训
江川林
Original
697 people have browsed it

本次是flex小案例——flex容器6大属性的案例完成
以下为具体属性
/1,设置flex容器的主轴方向/
/行向（默认）/
/flex-direction: row;/
/纵向/
/flex-direction: column;/
/2,设置是否换行（是否允许多行）/
/不换行（默认）/
/flex-wrap: nowrap;/
/ 换行/
flex-wrap: wrap;
/3,前两者的组合/
/行向，不换行/
/flex-flow: row nowrap;/
/行向，换行/
/flex-flow: column wrap;/
/4,设置项目在flex容器主轴上的排列方式/
/左对齐/
/justify-content: flex-start;/
/右对齐/
/justify-content: flex-end;/
/居中对齐/
/justify-content: center;/
/ 设置项目主轴上的剩余空间/
/两端对齐/
/justify-content: space-between;/
/分散对齐/
/justify-content: space-around;/
/平均对齐/
/justify-content: space-evenly;/
/5,设置项目在容器的交叉轴上的排列方式/
/顶部对齐/
/align-items: flex-start;/
/底部对齐/
/align-items: flex-end;/
/居中对齐/
/align-items: center;/
/6,设置项目在多行容器交叉轴中的排列方式/
/align-content: space-between;/
/align-content: space-around;/
/align-content: space-evenly;/

以下是独立完成的编码内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex容器的6大属性</title>
  6.     <style>
  7.         .container {
  8.             width: 1200px;
  9.             height: 300px;
  10.             border: 1px dashed;
  11.             background-color: lightcoral;
  12.             display: flex;
  14.             /*1,设置flex容器的主轴方向*/
  15.                 /*行向（默认）*/
  16.             flex-direction: row;
  17.                 /*纵向*/
  18.             /*flex-direction: column;*/
  19.             /*2,设置是否换行（是否允许多行）*/
  20.                 /*不换行（默认）*/
  21.             /*flex-wrap: nowrap;*/
  22.                 /*  换行*/
  23.             flex-wrap: wrap;
  24.             /*3,前两者的组合*/
  25.                 /*行向，不换行*/
  26.             /*flex-flow: row nowrap;*/
  27.                 /*行向，换行*/
  28.             /*flex-flow: column wrap;*/
  29.             /*4,设置项目在flex容器主轴上的排列方式*/
  30.                 /*左对齐*/
  31.             /*justify-content: flex-start;*/
  32.                 /*右对齐*/
  33.             /*justify-content: flex-end;*/
  34.             /*居中对齐*/
  35.             /*justify-content: center;*/
  36.             /*        设置项目主轴上的剩余空间*/
  37.             /*两端对齐*/
  38.             /*justify-content: space-between;*/
  39.             /*分散对齐*/
  40.             /*justify-content: space-around;*/
  41.             /*平均对齐*/
  42.             /*justify-content: space-evenly;*/
  43.             /*5,设置项目在容器的交叉轴上的排列方式*/
  44.             /*顶部对齐*/
  45.             /*align-items: flex-start;*/
  46.             /*底部对齐*/
  47.             /*align-items: flex-end;*/
  48.             /*居中对齐*/
  49.             /*align-items: center;*/
  50.             /*6,设置项目在多行容器交叉轴中的排列方式*/
  51.             /*align-content: space-between;*/
  52.             align-content: space-around;
  53.             /*align-content: space-evenly;*/
  54.         }
  57.         .items {
  58.             width: 200px;
  59.             height: 100px;
  60.             border: 1px dashed red;
  61.             background-color: lightblue;
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <div class="container">
  67.         <span class="items">1</span>
  68.         <span class="items">2</span>
  69.         <span class="items">3</span>
  70.         <span class="items">4</span>
  71.         <span class="items">5</span>
  72.         <span class="items">6</span>
  73.         <span class="items">7</span>
  74.     </div>
  75. </body>
  76. </html>

以下是手写与默写的flex容器属性
![![![](https://img.php.cn/upload/image/363/904/701/1577261922735146.jpg)](https://img.php.cn/upload/image/587/204/531/1577261906556050.jpg)](https://img.php.cn/upload/image/553/297/778/1577261891270765.jpg)

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：作业写得不错,但排版太难看了, 你看你的第一部分, 是纯文本显示, 这样的技术博客, 如果你是阅读者, 你会喜欢看吗?
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！