Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【CSS】布局技术一：Flex 布局技术(一维)
Blogger Information
Blog 94
fans 0
comment 0
visits 92712
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
670 people have browsed it

Flex 布局(一维)

flex: 弹性盒布局

Flex 术语

  1. flex 容器: display: flex / inline-flex
  2. flex 项目: flex 容器的子元素(仅限子元素,可嵌套)
  3. flex 主轴: 项目排列参考线
  4. flex 交叉轴: 与主轴垂直的参考线

主轴,交叉轴不可见, 仅供布局参考

Flex 属性

(一) 容器属性

  1. display: 容器类型(块或行内)
  2. flex-flow: 主轴方向与是否换行
  3. place-content: 项目在”主轴”上的排列方式
  4. place-items: 项目在”交叉轴”上的排列方式

(二) 项目属性

  1. flex: 项目在”主轴”上的缩放比例与宽度
  2. place-self 某项目在”交叉轴”上的排列方式
  3. order: 项目在”主轴”上的排列顺序

更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

示例代码

  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>flex属性简介</title>
  8.   </head>
  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>
  16.     <style>
  17.       /* flex容器 */
  18.       .container {
  19.         width: 450px;
  20.         height: 50px;
  21.         /* flex: 行内块 */
  22.         display: flex;
  24.         /* 1. 默认状态 */
  25.         /* 主轴方向 */
  26.         /* flex-direction: row; */
  27.         /* 是否换行 */
  28.         /* flex-wrap: nowrap; */
  29.         /* 主轴排列 */
  30.         /* justify-content: start; */
  31.         /* 单行(不换行) */
  32.         align-items: stretch;
  33.         /* 多行(换行) */
  34.         align-content: start;
  36.         /* ---------------------------- */
  38.         /* flex-flow: flex-direction flex-wrap; */
  39.         flex-flow: row nowrap;
  41.         /* 为了与grid统一记忆,使用`place-`为前缀的属性替换原来flex-  */
  42.         /* justify-content  -> place-content 替换; */
  43.         place-content: start;
  45.         /* ( align-items, align-content ) -> place-items 替换; */
  46.         place-items: stretch;
  48.         /* 将 5 个 容器属性 , 减少到 3 个 */
  50.         /* ---------------------------- */
  52.         /* 3. 自定义属性值 */
  53.         /* (1)  flex-flow:主轴方向, 多行容器 */
  54.         /* flex-flow: row nowrap;
  55.         flex-flow: column nowrap;
  56.         flex-flow: column wrap; */
  58.         /* (2) place-content: 主轴排列与"对齐"(通过分配剩余空间实现) */
  59.         place-content: start;
  60.         /* 居右 */
  61.         place-content: end;
  62.         /* 居中 */
  63.         place-content: center;
  64.         /* 二端对齐 */
  65.         place-content: space-between;
  66.         /* 分散对齐 */
  67.         place-content: space-around;
  68.         /* 平均对齐 */
  69.         place-content: space-evenly;
  71.         /* (3) place-items: 交叉轴排列 */
  72.         place-items: stretch;
  73.         /* place-items: start;
  74.         place-items: end;
  75.         place-items: center; */
  76.         /* 因为是单行容器,所以不涉及对齐方式 */
  77.       }
  79.       /* flex项目 */
  80.       .container > .item {
  81.         /* width: 100px; */
  82.         background-color: lightgreen;
  84.         /* 项目属性 */
  86.         /* (1) flex : 项目缩放比例与宽度 */
  87.         /* flex: flex-grow flex-shrink flex-basis */
  88.         /* flex: 放大比例 缩小比例 计算宽度 */
  90.         /* 1. 默认状态(部分响应): 不放大,允许缩小,宽高自动 */
  91.         flex: 0 1 auto;
  92.         flex: initial;
  94.         /* 2. 完全响应: 允许放大,允许缩小,宽高自动 */
  95.         flex: 1 1 auto;
  96.         flex: auto;
  98.         /* 3. 完全不响应: 禁止放大,禁止缩小,宽高自动 */
  99.         flex: 0 0 auto;
  100.         /* flex: 0 0 200px; */
  101.         /* min-width > flex-basis > width  */
  102.         /* min-width: 250px; */
  103.         flex: none;
  105.         /* 常用缩写 */
  106.         flex: 1;
  107.         /* 完整 */
  108.         /* flex: 1 1 auto;
  109.         flex: auto; */
  110.         /* flex: 1; */
  111.         /* flex: 2; */
  112.         /* flex: 9; */
  113.       }
  115.       /* 例如, 有一个三列布局, 中间一列的宽度,是二边的3倍 */
  116.       .container .item:first-of-type,
  117.       .container .item:last-of-type {
  118.         flex: 1;
  119.         background-color: yellow;
  120.       }
  121.       .container .item:first-of-type + * {
  122.         background-color: wheat;
  123.         flex: 3;
  125.         /* 自定义某个项目在交叉轴上的排列 */
  126.         /* place-self: start;
  127.         place-self: end; */
  128.       }
  130.       /* 第一个 */
  131.       .container .item:first-of-type {
  132.         order: -1;
  133.         background-color: violet;
  134.       }
  135.       /* 第二个 */
  136.       .container .item:first-of-type + * {
  137.         order: 1;
  138.       }
  139.       /* 第三个 */
  140.       .container .item:last-of-type {
  141.         order: 0;
  142.       }
  143.     </style>
  144.   </body>
  145. </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