Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 210324 CSS flex 布局
Blogger Information
Blog 18
fans 0
comment 0
visits 11023
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
210324 CSS flex 布局
xyphpblog
Original
587 people have browsed it

flex布局

主要组成

  • 容器 (container)
  • 项目 (flex items)
  • 主轴 (main axis)
  • 交叉轴 (cross axis)

1. 设置容器

使用flex布局，先设置容器为flex容器，容器的子元素自动变为容器的项目，且为行内块级元素

  1.    <style>
  2.         .container {
  3.             /* 转为flex布局，该元素即为flex容器 */
  4.             display: flex;
  5.             height: 20rem;
  6.         }
  7.     </style>
  8.     ---------------------------------------------------------------
  9.     <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.     </div>
  20. </body>

2. 容器换行

  • 设置为单行容器，不换行
  1.        .container {
  2.             /* 主轴方向： 默认水平 */
  3.             /* flex-direction: row; */
  4.             /* 禁止换行 */
  5.             /* flex-wrap: nowrap; */
  6.             /* 简化写法 */
  7.             flex-flow: row nowrap;
  8.         }

  • 设置为多行容器，允许换行
  1.        .container {
  2.             /* 允许换行 */
  3.             /* flex-flow: row wrap; */
  4.             /* 垂直换行 */
  5.             flex-flow: column wrap;
  6.         }

3. 对齐方式

设置项目在主轴对齐（主轴有剩余空间）

方式 1： 所有项目作为整体处理

  • justify-content: flex-start;
  • justify-content: flex-end;
  • justify-content: center;

flex-start

flex-end

center

方式 2：项目作为个体处理

  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly

space-between

space-around

space-evenly

设置项目在交叉轴对齐

方式 1： align-items
设置flex子项在每个flex行的交叉轴上的默认对齐方式

  • align-items: stretch (默认,若子元素设置高度则无效，因为高度属性覆盖stretch)
  • align-items: flex-start
  • align-items: flex-end
  • align-items: center

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

方式 2：align-content
适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐

  • align-content: stretch(默认,若子元素设置高度则无效，因为高度属性覆盖stretch)
  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: space-evenly

align-content: stretch

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: space-evenly

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