flex

来源：互联网发布：oracle sql性能优化编辑：程序博客网时间：2024/06/17 10:01

1.1属性

  1 flex-direction：（项目的排列方向）    row（默认值）：主轴为水平方向，起点在左端。    row-reverse：主轴为水平方向，起点在右端。    column：主轴为垂直方向，起点在上沿。    column-reverse：主轴为垂直方向，起点在下沿。    .box {        flex-direction: row | row-reverse | column | column-reverse;    }2 flex-wrap：（如果一条轴线排不下，如何换行。）    nowrap（默认）：不换行。    wrap：换行，第一行在上方。    wrap-reverse：换行，第一行在下方。    .box{        flex-wrap: nowrap | wrap | wrap-reverse;    }3 flex-flow （集上两种于一身,默认值为row nowrap。）    .box {        flex-flow: <flex-direction> || <flex-wrap>;    }4 justify-content(在主轴上的对齐方式---水平)    flex-start（默认值）：左对齐    flex-end：右对齐    center： 居中    space-between：两端对齐，项目之间的间隔都相等。    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。    .box {        justify-content: flex-start | flex-end | center | space-between | space-around;        }5 align-items属性（交叉轴上如何对齐。---垂直）    flex-start：交叉轴的起点对齐。    flex-end：交叉轴的终点对齐。    center：交叉轴的中点对齐。    baseline: 项目的第一行文字的基线对齐。    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。    .box {        align-items: flex-start | flex-end | center | baseline | stretch;    }6 align-content（多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）    flex-start：与交叉轴的起点对齐。    flex-end：与交叉轴的终点对齐。    center：与交叉轴的中点对齐。    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。    stretch（默认值）：轴线占满整个交叉轴。    .box {        align-content: flex-start | flex-end | center | space-between | space-around | stretch;    }

1.2属性

    order 给的数值越小，排列越靠前，默认为 0（整数） item。    flex-grow 放大比例，默认为0，即如果存在剩余空间，也不放大。    flex-shrink 缩小比例，默认为1，即如果空间不足，该项目将缩小（负值对该属性无效）。

代码块

代码块语法遵循标准markdown代码，例如：

<style>#main {    width: 220px;    height: 300px;    border: 1px solid black;    display: flex;}#main>div {    flex: 1;}#main div:nth-child(2) {    flex: 2;}#main2 {    width: 220px;    height: 300px;    border: 1px solid black;    flex-direction: column-reverse;    display: flex;}#main3 {    width: 220px;    height: 300px;    border: 1px solid black;    flex-wrap: wrap-reverse;    display: flex;}#main4 {    width: 220px;    height: 300px;    border: 1px solid black;    flex-flow: row nowrap;    flex-flow: column nowrap;    flex-flow: column-reverse wrap-reverse;    display: flex;}#main5 {    width: 220px;    height: 300px;    border: 1px solid black;    justify-content: flex-start;    justify-content: flex-end;    justify-content: center;    justify-content: space-between;    justify-content: space-around;    display: flex;}#main5 div{    width:10%;}#main6 {    width: 220px;    height: 300px;    border: 1px solid black;    align-items: flex-start;    align-items: flex-end;    align-items: center;    align-items: baseline;    align-items: stretch;    display: flex;}#main6 div{    width:10%;}#main7 {    width: 220px;    height: 300px;    border: 1px solid black;    display: flex;    align-content: flex-start;    align-content: flex-end;     align-content: center;    align-content: space-between;    align-content: space-around;    align-content: stretch;    flex-wrap: wrap;}#main7 div{    width:55px;    height:20%;}#main8 {    width: 220px;    height: 300px;    border: 1px solid black;    display: flex;}#main8 div{    width:55px;    height:20%;}#main8 div:nth-child(1){    width:55px;    order:0;    height:20%;}#main8 div:nth-child(2){    width:55px;    order:1;    height:20%;    flex-grow:2;}#main8 div:nth-child(3){    width:55px;    order:1;    height:20%;    flex-grow:2;    align-self:flex-end;}</style><body><div id="main">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><div id="main2">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>    <div style="background-color:green;">带有更多内容的绿色 div</div>    <div style="background-color:red;">带有更多内容的绿色 div</div>    <div style="background-color:blue;">带有更多内容的绿色 div</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><div id="main3">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>    <div style="background-color:green;">带有更多内容的绿色 div</div>    <div style="background-color:red;">带有更多内容的绿色 div</div>    <div style="background-color:blue;">带有更多内容的绿色 div</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><div id="main4">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>    <div style="background-color:green;">带有更多内容的绿色 div</div>    <div style="background-color:red;">带有更多内容的绿色 div</div>    <div style="background-color:blue;">带有更多内容的绿色 div</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><div id="main5">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><div id="main6">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><div id="main7">    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>    <div style="background-color:lightblue;">蓝色</div>    <div style="background-color:coral;">红色</div>    <div style="background-color:lightblue;">蓝色</div></div><div id="main8">    <div style="background-color:coral;">3</div>    <div style="background-color:coral;">1</div>    <div style="background-color:lightblue;">2</div></div>

查看demo请点击这里

阅读全文

0 0