Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 3.24实例演示flex容器中的四个属性的功能，参数，以及作用
Blogger Information
Blog 10
fans 0
comment 0
visits 5566
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
3.24实例演示flex容器中的四个属性的功能，参数，以及作用
手机用户1615433136
Original
665 people have browsed it

弹性项目在主轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>弹性项目在主轴上的对齐方式</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.       }

转为flex布局,这个元素就叫flex容器,弹性容器

  1.   .container {
  2.         display: flex;
  3.         height: 20rem;
  4.         height: 100vh;
  5.         border: 1px solid #000;
  6.       }

项目样式: 必须是flex容器的子元素 .flex容器中的子元素自动成flex容器的项目,并且是行内块显示

  1.  .container > .item {
  2.         /* padding: 1rem; */
  3.         /* width: 10rem; */
  4.         height: 4rem;
  5.         background-color: lightblue;
  6.         border: 1px solid #000;
  7.       }

1.单行容器

  • 主轴方向：默认水平
    flex-direction: row;
  • 禁止换行
    flex-wrap: nowrap;
  • flex-flow: 主轴方向 是否换行;
    flex-flow: column nowrap;
    1. .container {
    2.       /* 主轴方向：默认水平，行 */
    3.       flex-direction: row;
    4.       /* 禁止换行 */
    5.       flex-wrap: nowrap;
    6.       /* flex-flow: 主轴方向 是否换行; */
    7.       flex-flow: row nowrap;
    8.     }

    2.多行容器

  • 允许换行
    flex-flow: row wrap;
  • 主轴垂直
    flex-flow: column nowrap;
  • 手机端常用的布局
    flex-flow: column nowrap;
    1. .container {
    2.       /* 允许换行 */
    3.       flex-flow: row wrap;
    4.       /* 主轴垂直 */
    5.       flex-flow: column nowrap;
    6.       /* 手机端常用的布局 */
    7.       flex-flow: column nowrap;
    8.     }
    ```
    </style>
    </head>
    <body>
    <div class="container">
    1. <div class="item">item1</div>
    2. <div class="item">item2</div>
    3. <div class="item">item3</div>
    4. <div class="item">item4</div>
    5. <div class="item">item5</div>
    6. <div class="item">item6</div>
    7. <div class="item">item7</div>
    8. <div class="item">item8</div>
    9. <div class="item">item9</div>
    10. <div class="item">item10</div>
    </div>
    </body>
    </html>
  1. #弹性项目在主轴上的对齐方式

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>弹性项目在主轴上的对齐方式</title>
<style>
* { box-sizing: border-box; } :root { font-size: 10px; } body { font-size: 1.6rem; }
###转为flex布局,这个元素就叫flex容器,弹性容器
.container { display: flex; height: 20rem; border: 1px solid #000; }
###项目样式: 必须是flex容器的子元素
.container > .item { width: 10rem; height: 5rem; background-color: lightcyan; border: 1px solid #000; }
###设置项目在主轴的对齐方式的前提是: 主轴上存在剩余空间
- 1. 将所有项目看成一个整体来处理
justify-content: flex-start; justify-content: flex-end; justify-content: center;
- 2.将所有项目看成一个个独立的个体来处理
- 二端对齐
justify-content: space-between;
- 分散对齐
justify-content: space-around;
- 平均对齐
justify-content: space-evenly;

###项目在交叉轴上的对齐方式: align-items
.container { align-items: stretch; align-items: flex-start; align-items: flex-end; align-items: center; }
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
</body>
</html>

弹性项目多行容器主轴中的对齐方式

多行容器中对齐时,主轴是没有剩余空间的,为什么?有剩余空间就不换行
换行后,如果需要设置对方方式,就要求交叉轴上必须要有剩余空间 

  1.     .container {
  2.         flex-flow: row wrap;
  3.         align-content: stretch;

将交叉轴上所有项目看成一个整体

  1.         align-content: flex-start;
  2.         align-content: flex-end;
  3.         align-content: center;

看成个体

  • 二端对齐
    align-content: space-between;
  • 分散对齐
    align-content: space-around;
  • 平均对齐
    align-content: space-evenly;
    </style>
    </head>
    <body>
    <div class="container">
    1. <div class="item">item1</div>
    2. <div class="item">item2</div>
    3. <div class="item">item3</div>
    4. <div class="item">item4</div>
    5. <div class="item">item5</div>
    6. <div class="item">item6</div>
    7. <div class="item">item7</div>
    8. <div class="item">item8</div>
    9. <div class="item">item9</div>
    10. <div class="item">item10</div>
    11. <div class="item">item11</div>
    12. <div class="item">item12</div>
    </div>
    </body>
    </html>
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