search

博客列表 >flex布局常用属性

flex布局常用属性

leverWang
leverWang原创
2020年06月23日 18:07:591029浏览

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>
上一条：flexbox弹性盒子下一条：CSS重点之盒模型和定位技术
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多