简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex容器与项目的认识和常用属性
Blogger Information
Blog 7
fans 0
comment 0
visits 3944
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
flex容器与项目的认识和常用属性
冷风
Original
616 people have browsed it

flex容器与项目的认识和常用属性

flex容器与项目的认识

  • 比如以下代码中(container：称之为容器)（top：称之为项目），给container设置display: flex;

  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>Document</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       :root {
  15.         font-size: 10px;
  16.       }
  17.       body {
  18.         font-size: 1.6rem;
  19.       }
  20.       .container {
  21.         border: 1px solid darkorange;
  22.         height: 40rem;
  23.         display: flex;
  24.       }
  25.       .container > .top {
  26.         border: 1px solid darkorange;
  27.         height: 20rem;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="container">
  33.       <div class="top">我是第1</div>
  34.       <div class="top">我是第2</div>
  35.       <div class="top">我是第3</div>
  36.       <div class="top">我是第4</div>
  37.     </div>
  38.   </body>
  39. </html>
  • flex常用主轴上的对齐属性有以下
    • 剩余空间左边，项目靠右边 （justify-content: flex-end;）
    • 剩余空间为两边，项目居中（justify-content: center;）
    • 二端对齐，剩余空间留在中间（justify-content: space-between;）
    • 平均对齐，剩余空间都是平均的（justify-content: space-evenly;）
  • flex常用交叉轴对齐属性有以下
    • 剩余空间在上 项目在下（align-items: flex-end）;
    • 剩余空间为上下 项目居中（align-items: center;）
    • 完全无弹性，也就是项目不能伸小扩大，为固定状态大小的意思，flex: none;
    • 完全自适应，也就是项目能扩大伸小flex: 1;

      -控制某个项目在交叉轴上的对齐（align-self: flex-start;为上）（align-self: flex-end;为下），居中就没啥用，因为本来就是居中（align-self: center;）
    • 这个属性很好玩 order: 1; 意思就是控制项目的顺序，默认状态是0，比如我把我是第一设置为order: 1;，那么它会跑到我是第4后面去

    以下常用属性都用到的效果

  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.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       :root {
  15.         font-size: 10px;
  16.       }
  17.       body {
  18.         font-size: 1.6rem;
  19.       }
  20.       .container {
  21.         border: 1px solid darkorange;
  22.         height: 40rem;
  23.         display: flex;
  24.         justify-content: space-evenly;
  25.         align-items: center;
  26.       }
  27.       .container > .top {
  28.         border: 1px solid darkorange;
  29.         height: 20rem;
  30.         width: 10rem;
  31.       }
  32.       .container > .top:nth-of-type(2) {
  33.         flex: none;
  34.         align-self: flex-start;
  35.       }
  36.       .container > .top:nth-of-type(3) {
  37.         flex: 1;
  38.       }
  39.       .container > .top:first-of-type {
  40.         order: 1;
  41.         background: aquamarine;
  42.       }
  43.       .container > .top:nth-of-type(4) {
  44.         align-self: flex-end;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <div class="container">
  50.       <div class="top">我是第1</div>
  51.       <div class="top">我是第2</div>
  52.       <div class="top">我是第3</div>
  53.       <div class="top">我是第4</div>
  54.     </div>
  55.   </body>
  56. </html>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！