Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css之flex容器
Blogger Information
Blog 41
fans 2
comment 0
visits 29499
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
627 people have browsed it

flex容器的4个属性

1.容器

  • 定义

    只要有display：flex属性的就是flex容器

  • 作用和功能

    转换为flex容器后可以使用flex布局

2.项目

  • 定义

    flex容器的子元素。

  • 作用和功能

    项目都是行内块，并且是和容器等高的

3.主轴与交叉轴

  • 定义

    项目排列的轴线，默认值是水平单行排列

  • 功能和作用

    设定项目的排列方向与是否换行，还有对齐方式

  • 参数

    flew-direction:row 水平方向
    flew-wrap:nowrap 禁止换行
    flew-flow：主轴方向 是否换行 （这是简化写法）
    wrap 允许换行 nowarp禁止换行 row水平排列 column垂直排列

  • 主轴对齐方式

    将所有项目看成一个整体来处理
    justify-content: flex-start 靠左对齐
    justify-content: flex-end 靠右对齐
    justify-content: center 居中对齐

    将所有项目看成一个个独立的个体来处理
    justify-content: space-between 两端对齐
    justify-content: space-around 分散对齐
    justify-content: space-evenly 平均对齐

  • 交叉轴对齐方式

    align-items: stretch 元素拉伸
    align-items: flex-start 靠顶对齐
    align-items: flex-end 靠底对齐
    align-items: center 居中对齐

  • 实例演示

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性flex容器与项目</title>
  6.     <style>
  7.         * {
  8.             box-sizing: border-box;
  9.         }
  10.         *{
  11.             font-size: 10px;
  12.         }
  13.         body {
  14.             font-size: 1.6rem;
  15.         }
  16.         .container {
  17.             /*转为flex布局,这个元素就叫flex容器，弹性容器*/
  18.             display : flex;
  19.             height: 20rem;
  20.             border: 1px solid red;
  21.         }
  22.         /*项目样式：必须是flex容器的子容器*/
  23.         /*flex容器中的子元素自动生成flex容器的项目，并且是行内块显示*/
  25.         .container>.item {
  26.             width: 10rem;
  28.             background-color: darkseagreen;
  29.             border: 1px solid black;
  30.         }
  31.         /*主轴对齐方式*/
  32.         .container {
  33.             /*将所有项目看成一个整体来处理*/
  34.             /*靠左*/
  35.             justify-content: flex-start;
  36.             /*靠右*/
  37.             justify-content: flex-end;
  38.             /*居中*/
  39.             justify-content: center;
  40.             /*将所有项目看成一个个独立的个体来处理*/
  41.             /*两端对齐*/
  42.             justify-content: space-between;
  43.             /*分散对齐*/
  44.             justify-content: space-around;
  45.             /*平均对齐*/
  46.             justify-content: space-evenly;
  48.         }
  49.         /*交叉轴对齐方式*/
  50.         .container {
  51.             /*元素拉伸*/
  52.             align-items: stretch;
  53.             /*靠顶对齐*/
  54.             align-items: flex-start;
  55.             /*靠底对齐*/
  56.             align-items: flex-end;
  57.             /*居中对齐*/
  58.             align-items: center;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64. <div class="container">
  65.     <div class="item">item1</div>
  66.     <div class="item">item2</div>
  67.     <div class="item">item3</div>
  69. </div>
  70. </body>
  71. </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