Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css-flex布局
Blogger Information
Blog 13
fans 1
comment 0
visits 9909
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
css-flex布局
大宇
Original
512 people have browsed it

作业内容：实例演示flex容器中的四个属性的功能，参数，以及作用
flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
采用flex布局的元素，成为flex容器，简称容器。
他的所有子元素自动成为容器成员，成为flex项目，简称项目

总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

容器属性
|序号 | 属性 |描述 |
|——-|————————|——————|
|1 | flex-direction | 设置主轴方向|
|2 | justify-content| 设置主轴上的子元素排列方式|
|3 | flex-wrap | 设置子元素是否换行|
|4 | flex-flow | 复合属性，相当于同时设置了flex-direction和flex-wrap|
|5 | align-content |设置侧轴上的子元素的排列方式（多行）|
|6 | align-items| 设置侧轴上的子元素的排列方式（单行）|

首先flex容器是默认主轴是x轴

flex-direction

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex容器与项目</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         /* 转为flex布局，这个元素就叫flex容器 */
  20.         display: flex;
  21.         height: 20rem;
  22.         border: 1px solid #000;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">item1</div>
  29.       <div class="item">item2</div>
  30.       <div class="item">item3</div>
  31.     </div>
  32.   </body>
  33. </html>

效果图：

flex-wrap

flex-wrap设置元素是否进行换行。
flex容器中的子元素自动成为flex容器的项目，并且是行内块显示
将flex-wrap改为flex-wrap:wrap; 会进行换行。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex项目的排列方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         display: flex;
  20.         height: 20rem;
  21.         border: 1px solid #000;
  22.       }
  23.       .container > .item {
  24.         width: 10rem;
  25.         padding: 1rem;
  26.         border: solid 1px #000;
  27.         background-color: lightgreen;
  28.       }
  29.       .container {
  30.         flex-direction: row;
  31.         flex-wrap: wrap;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">item1</div>
  38.       <div class="item">item2</div>
  39.       <div class="item">item3</div>
  40.       <div class="item">item3</div>
  41.       <div class="item">item3</div>
  42.       <div class="item">item3</div>
  43.       <div class="item">item3</div>
  44.       <div class="item">item3</div>
  45.       <div class="item">item3</div>
  46.     </div>
  47.   </body>
  48. </html>


将flex-direction改为flex-direction:column 就是讲主轴改为y轴
部分代码：

  1. .container {
  2.         flex-direction: column;
  3.         flex-wrap: wrap;
  4.       }


flex-direction还有两个属性是row-reverse和column-reverse 同字义一样，一个是反向行排列，一个是反向列排列，不常用，不做演示。

justify-content

设置主轴上的子元素排列方式
设置为flex-start 默认从头部开始，如果主轴是x轴，则从左到右，如果主轴是y轴，则从上到下。
部分代码：

  1. .container {
  2.         flex-direction: row;
  3.         flex-wrap: wrap;
  4.         justify-content: flex-start;
  5.       }


默认就是flex-start。
flex-end就是倒着排序。

  1. .container {
  2.         flex-direction: row;
  3.         flex-wrap: wrap;
  4.         justify-content: flex-end;
  5.       }


justify-content:center 在主轴居中对齐

  1. .container {
  2.         flex-direction: row;
  3.         flex-wrap: wrap;
  4.         justify-content: center;
  5.       }


justify-content:space-around 平分剩余空间

  1. .container{
  2.     flex-direction:row;
  3.     flex-wrap:wrap;
  4.     justify-content:space-around;
  5. }


justify-content:space-between 先两侧贴边，再平分空间

  1. .container{
  2.     flex-direction:row;
  3.     flex-wrap:wrap;
  4.     justify-content:space-between;
  5. }

align-items

控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项时使用。
默认值是stretch （拉伸） 拉伸需要不给子盒子高度。
align-items: center; y轴排列居中。
代码：

  1. .container {
  2.         flex-direction: row;
  3.         flex-wrap: nowrap;
  4.         justify-content: space-between;
  5.         align-items: center;
  6.       }


flex-start

flex-end:

flex-flow

复合属性，相当于设置了flex-direction和flex-wrap
flex-flow:主轴方向 是否换行;

  1.  .container {
  2.         /* flex-direction: column;
  3.         flex-wrap: nowrap; */
  4.         flex-flow: column nowrap;
  5.         justify-content: space-between;
  6.         align-items: flex-start;
  7.       }

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