弹性盒模型 flex

2009年,W3C提出了一个新的盒模型(flex),用于解决网页布局中的一些问题。


flex 的优势

  • flex布局的子元素不会脱标。
  • 属性非常丰富,可以灵活使用更加便捷的为页面布局。
  • IE低版本不支持IE10-11支持度不高,标准浏览器完全支持。
  • 移动端支持性也比较高。

弹性盒子

声明定义:使用display:flex;或者inline-flex**声明一个元素为弹性盒子。

[注意 ]弹性盒子中的子级块级元素会并排显示。

flex与inline-flex的区别

  • flex;如果没有设置宽高,宽默认为100%, 高度为内容的高。
  • inline-flex;如果没有设置宽高,宽高为内容的宽高,使用的比较少。

弹性盒子的属性

1.flex-direction 控制子元素排列的方向。

  • row 从左到右水平排列子元素(默认值)。
  • row-reverse 从右到左水平排列子元素。
  • column 从上到下垂直排列子元素。
  • column-reverse 从下往上垂直排列子元素。
例1:
    <style>
        .father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

弹性盒模型 flex

例2:
    <style>
        .father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-direction: row-reverse;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }
    

弹性盒模型 flex

2.flex-wrap 规定容器是单行或是多行。

  • nowrap 子元素不会换行(默认)。
  • wrap 子元素的宽/高总和超出父容器的宽/高时,子元素会换行。
  • wrap-reverse 容器换行时,以相反方向。
例1:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

弹性盒模型 flex

例2:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap-reverse;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

弹性盒模型 flex

3.flex-flow 是flex-direction与flex-wrap的组合简写。

例:
      flex-flow: row wrap;

主轴与交叉轴

  • 主轴:flex子元素的排列方向。默认是水平方向,从左到右。
  • 交叉轴:与主轴垂直,方向是换行的方向。

1.justify-content 控制子元素在主轴上的排列方式。

  • flex-start 第一个元素紧靠主轴的起点。
  • flex-end 元素紧靠主轴的终点。
  • center:元素居中。
  • space-between 第一个元素紧靠起点,最后一个元素紧靠终点,余下的元素平均分配剩余空间。
  • space-around 每个元素两侧都有一个相同的距离,所有元素之间的间隔要比元素与容器之间的间隔大一倍。
  • space-evenly 元素间的平均分配。
例1:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            justify-content: space-between;
        }

弹性盒模型 flex

例2:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            justify-content: space-around;
        }

弹性盒模型 flex

2.align-items 设置子元素在交叉轴上的对齐方式。

  • flex-start 元素紧靠交叉轴的起点。
  • flex-end 元素紧靠交叉轴的终点。
  • center 元素在交叉轴方向居中。
  • stretch 拉伸。让子项与父容器的交叉轴等高或等宽(默认),前提是子项没有设置相应的
    宽高。
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            align-items: stretch;
        }
        .son  {
            /* width: 100px;
            height: 100px; */
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

弹性盒模型 flex

3.align-content 设置子元素在交叉轴上的对齐方式。(只适用多行,需要配合flex-wrap。)

  • flex-start 元素紧靠交叉轴的起点。
  • flex-end 元素紧靠交叉轴的终点。
  • center 元素在交叉轴方向居中。
  • stretch 拉伸。让子项与父容器的交叉轴等高或等宽(默认),前提是子项没有设置相应的宽高。
  • space-between:两端对齐,第一行紧靠起点,最后一行紧靠终点,剩余空间平均分配。
  • space-around:每一个元素都有一个相等的距离,两个元素之间的距离不会重合。元素间的间隔要比元素与容器之间的间隔大一倍。
  • space-evenly:元素间的距离平均分配。
例1:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

弹性盒模型 flex

例2:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

弹性盒模型 flex

例3:
		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: space-evenly;
        }

弹性盒模型 flex


上一篇:文本换行与溢出后省略


下一篇:[html] 如何让pre标签中的元素自动换行?