search

博客列表 >flex 浅析

flex 浅析

培(信仰)
培(信仰)原创
2020年12月24日 15:29:21578浏览

flex 布局

什么是flex

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

  1. .box{
  2.   display: flex;
  3. }

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴和垂直的交叉轴,项目默认沿主轴排列。

容器的属性

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式 
  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.         <div class="item">item10</div>
  12.         <div class="item">item11</div>
  13.         <div class="item">item12</div>
  14.     </div>
  1.         /* 单行容器 */
  2.         .container {
  3.             /* 主轴方向 */
  4.             /* flex-direction: row; */
  5.             /* 是否换行 */
  6.             /* flex-wrap: nowrap; */
  7.             /* 简写形式，以后采用这种写法第一个参数row或column 第二个参数 是否换行 wrap 或者 nowrap */
  8.             flex-flow:row nowrap;
  9.         }
  11.         /* 多行容器 */
  12.         .container {
  13.             flex-flow:row wrap;
  14.         }
  16.         .container {
  17.             flex-flow: column wrap;
  18.         }

弹性项目在单行容器的对齐方式起效果要有一个前提条件，需要有剩余空间
空间分配有两种方案：

  1.         .container {
  2.             /* 默认属性 可以不写 */
  3.             /* flex-flow: row nowrap; */
  5.             /*1. 将所有项目视为一个整体，在项目组两边进行分配 */
  6.             /* 从左右向右沿着开始位置 */
  7.             justify-content: flex-start;
  8.             /* 从右向左 从结束位置 */
  9.             justify-content: flex-end;
  10.             /* 居中对齐 */
  11.             justify-content: center;
  13.             /* 2. 将项目视为一个个独立的个体，在项目之间进行分配 */
  14.             /* 两端对齐 项目首尾顶住两边，中间项目的间距平均分配剩余空间*/
  15.             justify-content: space-between;
  16.             /* 分散对齐 剩余空间在每个项目的间距平均分配*/
  17.             justify-content: space-around;
  18.             /* 平均对齐 所有项目的间距平均分配剩余空间 */
  19.             justify-content: space-evenly;
  20.         }
  22.         /* 交叉轴上的对齐方式 */
  23.         .container {
  24.             /* 默认属性（等高列） 拉伸，可以不写 */
  25.             align-items: stretch;
  26.             /* 还可以设置从开始方向 */
  27.             align-items: flex-start;
  28.             /* 从底部开始 */
  29.             align-items: flex-end;
  30.             /* 居中对齐 */
  31.             align-items: center;
  32.         }
  33.         /* 单行容器因为只有一行，所以交叉轴上没有剩余空间 */

弹性项目在多行容器的对齐方式起效果要有一个前提条件，需要有剩余空间
空间分配有两种方案：

  2.         .container {
  3.             flex-flow: row wrap;
  4.             /* 将所有项目视为一个整体 */
  5.             /* 拉伸 */
  6.             align-content: stretch;
  7.             /* 从开始位置 */
  8.             align-content: flex-start;
  9.             /* 从结束位置 */
  10.             align-content: flex-end;
  12.             /* 交叉轴方向有剩余空间所以有独立的对齐方案*/
  13.             /* 两端对齐 相框或者多行菜单*/
  14.             align-content: space-between;
  15.             /* 分散对齐 */
  16.             align-content: space-around;
  17.             /* 平均对齐 */
  18.             align-content:space-evenly;
  19.          }
  20.         /*容器属性总结：
  21.         flex-flow:主轴方向与换行
  22.         justify-content:项目在主轴上的对齐方式
  23.         align-item:项目在交叉轴上的对齐方式
  24.         align-content:项目在多行容器中交叉轴上的对齐方式 */

3. 项目属性

序号 属性 描述
1 flex 项目的缩放比例与基准宽度
3 align-self 单个项目在交叉轴上的对齐方式
4 order 项目在主轴上排列顺序

flex 属性：项目的缩放比例与基准宽度

  1.         /* 项目属性flex */
  2.         .container .item{
  3.             /* flex: flex-grow flex-shrink flex-basis */
  4.             /* flex: 放大因子  收缩因子 项目在主轴上的基准宽度 */
  5.             /* 默认值：不放大 可收缩 */
  6.             flex:0 1 auto;
  7.             /* 等效 */
  8.             /* flex:initial; */
  10.             /* 允许放大缩小 */
  11.             flex:1 1 auto;
  12.             /* 等效 */
  13.             /* flex:auto; */
  15.             /* 禁止放大缩小 */
  16.             flex: 0 0 auto;
  17.             /* 等效 */
  18.             /* flex:none; */
  20.             /* 如果只写一个数字，表示放大因子 */
  21.             flex:1;
  23.             /* flex通常不会用来设置所有项目的默认选项，用来设置某一个项目 */
  26.         }
  27.         /* 要求第2个和第3个项目是第1个和第4个的两倍 */
  28.         .container .item:nth-of-type(2),
  29.         .container .item:nth-of-type(3){
  30.             flex:2;
  31.         }

align-self 属性： 单个项目在交叉轴上的对齐方式

  1.         /* 设置第二个项目与其他项目的对齐方式不一样 */
  2.         .container>.item:nth-of-type(2){
  3.             align-self: stretch;
  4.             align-self: flex-start;
  5.             align-self: flex-end;
  6.             align-self: center;
  8.             /* 还支持定位 */
  9.             position:relative;
  10.             left:-2em;
  11.             top:3em;
  12.             /* 绝对定位也ok */
  13.             position:absolute;
  14.             left:2em;
  15.             top:3em;
  16.         }

order 属性： 项目在主轴上排列顺序

  1.     <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         .container {
  9.             /* 转为flex弹性布局元素 */
  10.             display: flex;
  11.             height: 15em;
  12.             border: 1px solid #000;
  13.             padding: 1em;
  14.             margin: 1em;
  15.             position:relative;
  16.         }
  18.         .container>.item {
  19.             /* height: 5em; */
  20.             width: 5em;
  21.             background-color: skyblue;
  22.             border: 1px solid #000;
  23.         }
  24.         /* 默认是按照书写顺序排列 */
  25.         /* order越小越靠前 */
  26.         .container .item:first-of-type{
  27.             order:1;
  28.             background-color: red;
  29.         }
  30.         .container .item:nth-last-of-type(2){
  31.             order:2;
  32.             background-color: yellow;
  33.         }
  34.         .container .item:nth-last-of-type(3){
  35.             order:3;
  36.             background-color: blue;
  37.         }
  38.         .container .item:last-of-type{
  39.             order:-1;
  40.             background-color: green;
  41.         }
  43.     </style>

总结

  1. 任何元素都可以通过添加display:flex;属性 转为弹性盒子
  2. 转为flex元素后，它的内部“子元素”就支持flex布局了
  3. 使用了display:flex; 属性的元素称为：flex容器
  4. flex 容器中的“子元素”称之为：flex项目
  5. 容器中的项目自动转为“行内块元素”（不管之前是什么类型）
上一条：tp新闻实战笔记四（多级菜单和datatables体验）下一条：flex 京东页眉 和 页脚
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多