AI 助理
备案控制台
开发者社区 云原生 文章 正文

CSS魔法堂：Flex布局

2018-06-14 1935
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

前言

 Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。

Flex就这么简单

浏览器兼容性

 一说到兼容性就是永远的痛，不过幸运的是只要在IE10加-ms-前缀就可以用啦^_^

涉及的对象

 Flex布局主要是操作Flex Container 和 Flex Item两类对象。

Flex Container为作为布局容器拥有main axis，main start，main end，cross axis，cross start 和 cross end属性。

  1. main axis为主轴，默认是水平方向；
  2. main start为主轴起始位置，默认是主轴和左侧边框的交叉点(Flex Item会从main start和cross start开始排列)；
  3. main end为主轴结束位置，默认是主轴和右侧边框的交叉点；
  4. cross axis为交叉轴，默认是垂直方向；
  5. cross start为交叉轴起始位置，默认是交叉轴和上边框的交叉点；
  6. cross end为交叉轴结束位置，默认是交叉轴和下边框的交叉点。

Flex Item则为容器内的孩子元素，拥有main size和cross size属性。

  1. main size为Flex Item的主轴方向宽度；
  2. cross size为Flex Item的交叉轴方向宽度。

玩转Flex Container

/* 设置Flex Container，为其直接孩子节点创建Flex Context */
display: flex;        /* 定义块级Flex Contianer */
display: inline-flex; /* 定义行级Flex Contianer */
/* 设置main/cross axis方向和main/cross start, main/cross end的位置
 * row - 默认值，main axis为水平，main start为主轴和左侧边框的交叉点，main end为主轴和右侧边框的交叉点
 *               cross axis为垂直，cross start为交叉轴和上边框的交叉点，cross end为交叉轴和下边框的交叉点
 * row-reverse - main axis为水平，main start为主轴和右侧边框的交叉点，main end为主轴和左侧边框的交叉点
 *               cross axis为垂直，cross start为交叉轴和上边框的交叉点，cross end为交叉轴和下边框的交叉点
 * column - main axis为垂直，main start为主轴和上边框的交叉点，main end为主轴和下边框的交叉点
 *          cross axis为水平，cross start为交叉轴和左侧边框的交叉点，cross end为交叉轴和右侧边框的交叉点
 * column-reverse - main axis为垂直，main start为主轴和下边框的交叉点，main end为主轴和上边框的交叉点
 *                  cross axis为水平，cross start为交叉轴和左侧边框的交叉点，cross end为交叉轴和右侧边框的交叉点
 */
flex-direction: row | row-reverse | column | column-reverse 
/* 是否换行
 * nowrap - 默认值，打死都不换行
 * wrap - 乖乖换行，第一行到最后一行的方向为从 cross start 到 cross end
 * wrap-reverse - 乖乖换行，但第一行到最后一行的方向为从 cross end 到 cross start
 */
flex-wrap: nowrap | wrap | wrap-reverse

/* 一次搞定flex-direction 和 flex-wrap设置
 */
flex-flow: <flex-direction> || <flex-wrap>
/* 设置main axis方向的对齐方式
 * flex-start - 默认值，向main start对齐
 * flex-end - 向main end对齐
 * center - 居中
 * space-between - 若有多余空间，则平均分配到各Flex Item之间
 * space-around - 若有多余空间，则平均分配到各Flex Item两边
 * space-evenly - 若有多余空间，按"多余空间/(FlexItem数+1)"计算得到空间宽度，然后分配到各Flex Item两边
 */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

/* 设置cross axis方向的对齐方式
 * stretch - 默认值，当height为auto时，Flex Item被拉伸沾满cross axis的空间；否则无效果。
 * flex-start - 向cross start对齐
 * flex-end - 向cross end对齐
 * center - 居中
 * baseline - 对齐Flex Container的baseline
 */
align-items: flex-start | flex-end | center | stretch | baseline
/* 设置cross axis出现多行时，cross axis方向的对齐方式。当仅有一行时，无效果。
 * stretch - 默认值，当height为auto时，Flex Item被拉伸沾满cross axis的空间；否则无效果。
 * flex-start - 向cross start对齐
 * flex-end - 向cross end对齐
 * center - 居中
 * space-between - 若有多余空间，则平均分配到各Flex Item之间
 * space-round - 若有多余空间，则平均分配到各Flex Item两边 
 */
align-content: flex-start | flex-end | center | stretch | space-between | space-around

玩转Flex Item

注意：Flex Item的float,clear和vertical-align均无效。

/* 设置显示顺序
 * 默认值为0，根据元素在DOM树的位置决定显示的顺序
 */
order: <integer>
/* 设置当main axis方向存在多余空间时，元素拉伸所占的比例。
 * 例如#div1[style="flex-grow:1"]和#div2[style="flex-grow:3"]，现在多余空间为400px，那么div1占400*1/(1+3)，而div2占400*3/(1+3)。
 * 默认值为0，即元素不拉伸
 */
flex-grow: <number>
/* 设置当main axis方向存在空间不足且flex-wrap:nowrap时，元素的缩放比例。
 * 默认值为1
 */
flex-shrink: <number>
/* 设置元素的默认宽度，当设置为0时flex-grow无效
 * 默认值为auto
 */
flex-basis: auto | <length>
/* 一次搞定flex-grow、 flex-shrink和flex-basis
 * 默认值0 1 auto，关键值none 为 0 0 auto，关键值auto为 1 1 auto。
 */
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
/* 设置cross axis方向的对齐方式
 * stretch - 默认值，当height为auto时，Flex Item被拉伸沾满cross axis的空间；否则无效果。
 * flex-start - 向cross start对齐
 * flex-end - 向cross end对齐
 * center - 居中
 * baseline - 对齐Flex Container的baseline
 */
align-self: auto | flex-start | flex-end | center | baseline | stretch

应用

 通过Flex Layout我们可以轻松实现过去不好实现的效果

色子

<div class="box box1">
  <span class="dot"></span>
</div>
<div class="box box2">
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="box box3">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="box box4">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<div class="box box5">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <span class="dot"></span>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<div class="box box6">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
.box{
    vertical-align: top;
    margin: 10px;
    padding: 10px;
    width: 100px;
    height: 100px;
    background: #ccc;
    border-radius: 10%;
    box-shadow: 0 5px 1px #fff inset
        , 0 -5px 1px #888 inset
        , 5px 0 1px #aaa inset
        , -5px 0 1px #aaa inset;
    display: inline-flex;
    flex-flow: row wrap;
}
.dot{
    width:30px;
  height:30px;
    background: #222;
    border-radius:50%;
    box-shadow: 1px 4px 1px #000 inset
        , -1px -3px 3px #444 inset;
}

.box1{
    justify-content: center;
    align-items: center;
}
.box2{
    justify-content: space-between;
}
.box2 > .dot:last-child{
    align-self: flex-end;
}
.box3{
    justify-content: space-between;
}
.box3 > .dot:nth-of-type(2){
    align-self: center;
}
.box3 > .dot:last-child{
    align-self: flex-end;
}

.box4{
      flex-flow: column;
        justify-content: space-between;
}
.column{
    display: flex;
    justify-content: space-between;
}

.box5{
      flex-flow: column;
        justify-content: space-between;
}
.box5 > .dot{
    align-self: center;
}

.box6{
      flex-flow: row;
        justify-content: space-between;
}
.box6 > .column{
  flex-flow: column;
}

圣杯布局

<body class="container">
  <header>#header</header>
  <main>#main</main>
  <aside class="left-aside">#aside1</aside>
  <aside class="right-aside">#aside2</aside>
  <footer>#footer</footer>
</body>
body{
    margin:0;
    font-style: italic;
    font-family: sans;
}

/* Holy Grail Layout */
.container{
    display: flex;
    flex-direction: column;
}

@media all and (min-width: 600px){
    .container{
        flex-flow: row wrap;
    }
    header,footer{
        flex: 0 0 100%;
    }
    header{
        order: 0;
    }
    footer{
        order: 4;
    }
    .left-aside{
        order: 1;
    }
    .right-aside{
        order: 3;
    }
    .left-aside,.right-aside{
        flex: 0 0 10em;
    }
    main{
        order: 2;
        flex: 1;
    }
}

/* User Defined Style*/
.container > *{
    text-align: center;
}
main{
    background: #ccc;
    line-height: 6;
}
.left-aside{
    background: skyblue;
    line-height: 4;
}
.right-aside{
    background: tomato;
    line-height: 4;
}
header,footer{
    background: #666;
    line-height: 3;
}

栅格系统

<div class="grid">
  <div class="row">
    <div class="col col-5">
      <div>5/10</div>
    </div>
    <div class="col col-4">
      <div>4/10</div>
    </div>
    <div class="col col-1">
      <div>1/10</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div>
      auto
    </div>
  </div>
  <div class="col col-3">
    <div>
      3/10
    </div>
  </div>
</div>
/* Mobile First Grid System */
.grid{
    display: flex;
    flex-flow: row wrap;
}
.row{
    flex:0 0 100%;
    display:flex;
    flex-flow: row wrap;
}
.col{
    box-sizing: border-box;
    padding: 5px;
    flex: 0 0 100%;
}
@media all and (min-width:600px){
.col{
    flex: 1;
}
.col-10{flex:0 0 100%;}
.col-9{flex:0 0 90%;}
.col-8{flex:0 0 80%;}
.col-7{flex:0 0 70%;}
.col-6{flex:0 0 60%;}
.col-5{flex:0 0 50%;}
.col-4{flex:0 0 40%;}
.col-3{flex:0 0 30%;}
.col-2{flex:0 0 20%;}
.col-1{flex:0 0 10%;}
}

/* User Defined Style*/
.col>div{
    text-align: center;
    background: #bbb;
    line-height: 2.5;
    height: 100%;
    font-family: sans;
}

带附加项的表单控件

<div class="form-input">
  <i class="form-addon">Amount</i>
  <input class="form-control">
  <i class="form-addon form-addon-after">Encrypt</i>
</div>
.form-input{
    display: inline-flex;
    line-height: 2;
    border: solid 1px rgba(0,0,0,0.3);
}
.form-input:hover{
        border: solid 1px rgba(0,0,0,0.4);
}
.form-addon{
    font-style: normal;
    color: #666;
    background: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    border-right: solid 1px rgba(0,0,0,0.3);
}
.form-addon-after{
    border-left: solid 1px rgba(0,0,0,0.3);
    border-right: none 0;
}
.form-control{
    border:none 0;
    outline-color: transparent;
    padding: 5px;
    caret-color: #888;
    font-size: 16px;
}

总结

尊重原创，转载请注明转自：https://www.cnblogs.com/fsjohnhuang/p/9134088.html ^_^肥仔John

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

文章标签：
前端开发
容器
关键词：
flex布局
CSS布局
CSS flex布局
CSS flex
肥仔john
目录
相关文章
二二*一一
|
2月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
158 1
游客ogeeqvh5vfa5q
|
2月前
|
容器
Bootstrap5 Flex（弹性）布局4
排序：.order 类可设置弹性子元素的排序，范围从 .order-1 至 .order-12，数字越小优先级越高。外边距：.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹：.flex-nowrap（默认）、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
游客ogeeqvh5vfa5q
45 10
那年春天
|
3月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
404 57
游客ogeeqvh5vfa5q
|
1月前
|
容器
Bootstrap5 Flex（弹性）布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式，包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类，以实现不同设备上的响应式设计。
游客ogeeqvh5vfa5q
37 5
游客ogeeqvh5vfa5q
|
1月前
Bootstrap5 Flex（弹性）布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式，如 .align-content-start、.align-content-center 等。对于单行子元素，使用 .align-items-* 控制对齐，例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
游客ogeeqvh5vfa5q
40 5
游客ogeeqvh5vfa5q
|
2月前
Bootstrap5 Flex（弹性）布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列，默认左对齐；`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列；`.flex-column-reverse`则反向排列。示例展示了不同类的效果，通过改变类名实现布局调整。
游客ogeeqvh5vfa5q
47 6
游客ogeeqvh5vfa5q
|
2月前
Bootstrap5 Flex（弹性）布局3
`.justify-content-*` 类用于调整弹性子元素的对齐方式，支持 start、end、center、between、around 等值。`.flex-fill` 类使所有子元素等宽，而 `.flex-grow-1` 则让指定子元素占据剩余空间。这些类在布局设计中非常实用。
游客ogeeqvh5vfa5q
36 5
我是快乐的嘟嘟
|
2月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
206 34
html的七十二变
|
2月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局（Flexbox）：构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局（Flexbox）是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例，帮助读者快速掌握这一强大布局方法。
html的七十二变
262 3
LALA
|
2月前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
LALA
47 10