search

博客列表 >【CSS】布局技术一：Flex 布局技术(一维)

【CSS】布局技术一：Flex 布局技术(一维)

可乐随笔
可乐随笔原创
2022年11月27日 20:21:48669浏览

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>
上一条：【CSS】布局技术二：grid 布局（二维）总结下一条：【CSS】定位类型与原理：相对定位-绝对定位-固定定位-粘性定位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多