Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局常用属性
Blogger Information
Blog 26
fans 2
comment 0
visits 24278
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
flex布局常用属性
leverWang
Original
1030 people have browsed it

flex 布局常用属性

属性 描述
flex-direction 主轴的方向（子元素的排列方向），row（默认值）column（主轴为垂直方向）
flex-wrap 主轴上子元素是否换行 ，nowrap（默认）：不换行。wrap：换行
justify-content 主轴上子元素的排列方式
flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

justify-content属性效果演示

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .container {
  11.             width: 600px;
  12.             height: 300px;
  13.             background-color: pink;
  14.             /* 设置为flex布局后 子元素的float、clear、vertical-align失效 */
  15.             display: flex;
  16.             /* 设置主轴方向 默认为row 元素按X轴方向排列 */
  17.             flex-direction: row;
  18.             /* 设置主轴方向为column 元素按Y轴方向排列 */
  19.             /* flex-direction: column; */
  20.             /* 设置主轴上子元素的排列方式 */
  21.             justify-content: space-between;
  22.             /* 设置主轴上子元素是否换行，默认不换行,不换行的情况下如果子元素超出父级则缩放子元素*/
  23.             flex-wrap: nowrap;
  24.         }
  25.         .container>.item {
  26.             width: 150px;
  27.             height: 100px;
  28.             background-color: blueviolet;
  29.             color: #fff;
  30.             font-size: 2rem;
  31.         }     
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="container">
  37.         <span class="item">1</span>
  38.         <span class="item">2</span>
  39.         <span class="item">3</span>
  40.         <span class="item">4</span>
  43.     </div>
  44. </body>
  46. </html>

order属性效果演示

  1. <style>
  2.         .container {
  3.             width: 600px;
  4.             height: 300px;
  5.             background-color: pink;
  6.             /* 设置为flex布局后 子元素的float、clear、vertical-align失效 */
  7.             display: flex;
  8.             /* 设置主轴方向 默认为row 元素按X轴方向排列 */
  9.             flex-direction: row;
  10.             /* 设置主轴方向为column 元素按Y轴方向排列 */
  11.             /* flex-direction: column; */
  12.             /* 设置主轴上子元素的排列方式 */
  13.             justify-content: space-between;
  14.             /* 设置主轴上子元素是否换行，默认不换行,不换行的情况下如果子元素超出父级则缩放子元素*/
  15.             flex-wrap: nowrap;
  17.         }
  19.         .container>.item {
  20.             width: 150px;
  21.             height: 100px;
  22.             background-color: blueviolet;
  23.             color: #fff;
  24.             font-size: 2rem;
  26.         }
  28.         /* 定义子元素的排列顺序,数字越小越靠前 */
  29.         .item:first-of-type {
  30.             order: 1;
  31.             background: lightskyblue;
  32.         }
  34.         .item:nth-of-type(2) {
  35.             order: 4;
  36.             background: lightgreen;
  37.         }
  39.         .item:nth-of-type(3) {
  40.             order: 3;
  41.             background: lightslategrey;
  42.         }
  44.         .item:last-of-type {
  45.             order: 2;
  46.             background: rgb(22, 129, 0);
  47.         }
  48.     </style>
  50.      <div class="container">
  51.         <span class="item">1</span>
  52.         <span class="item">2</span>
  53.         <span class="item">3</span>
  54.         <span class="item">4</span>
  55.     </div>

基于浮动实现二列布局

  1.  <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         header,
  9.         footer {
  10.             width: 100%;
  11.             height: 80px;
  12.             background-color: rgb(0, 107, 0);
  13.         }
  15.         /* 基于浮动实现 */
  17.         .wrap {
  18.             /* 防止塌陷 */
  19.             overflow: hidden;
  20.             width: 1200px;
  21.             margin: auto;
  22.         }
  24.         /* 设置子元素左浮动 */
  25.         aside {
  26.             background: maroon;
  27.             float: left;
  28.             width: 20%;
  29.             min-height: 500px;
  30.         }
  32.         /* 设置子元素右浮动 */
  33.         main {
  34.             background: rgb(0, 99, 145);
  35.             float: right;
  36.             width: 75%;
  37.             min-height: 500px;
  38.         }
  39.     </style>
  40.     <header></header>
  41.     <div class="wrap">
  42.         <aside>左侧</aside>
  43.         <main>主体</main>
  44.     </div>
  45.     <footer></footer>

基于定位实现二列布局

  1.  <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         header,
  9.         footer {
  10.             width: 100%;
  11.             height: 80px;
  12.             background-color: rgb(0, 107, 0);
  13.         }
  15.         /* 基于浮动实现 */
  17.         .wrap {
  18.             /* 防止塌陷 */
  19.             overflow: hidden;
  20.             width: 1200px;
  21.             margin: auto;
  22.             min-height: 500px;
  23.             /*  定位父级 */
  24.             position: relative;
  25.         }
  27.         /* 设置子元素绝对定位位置 */
  28.         aside {
  29.             background: maroon;
  30.             position: absolute;
  31.             width: 20%;
  32.             /* 继承父级高度 */
  33.             min-height: inherit;
  34.             left: 0;
  35.         }
  37.         /* 设置子元素右浮动 */
  38.         main {
  39.             background: rgb(0, 99, 145);
  40.             float: right;
  41.             width: 75%;
  42.             /* 继承父级高度 */
  43.             min-height: inherit;
  44.             position: absolute;
  45.             right: 0;
  46.         }
  47.     </style>
  48.     <header></header>
  49.     <div class="wrap">
  50.         <aside>左侧</aside>
  51.         <main>主体</main>
  52.     </div>
  53.     <footer></footer>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：order属性只能用到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