0
点赞
收藏
分享

微信扫一扫

Flex布局(弹性布局)

杨小羊_ba17 2022-03-11 阅读 200
css3csshtml

1.采用flex布局的元素称为''容器'':容器有两个轴,主轴和侧轴

2.容器的属性

1.flex-direction : 决定主轴的方向

主轴是水平方向:

  • flex-direction:row(默认值):起点在左边
  • flex-direction:row-reverse:起点在右边

主轴是垂直方向:

  • flex-direction:column:起点在上沿
  • flex-direction:column-reverse:起点在下沿

2.flex-wrap:决定是否换行

  • flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-wrap: nowrap(默认值):不换行
  • flex-wrap: wrap:换行
  • flex-wrap: wrap-reverse:换行在第一行上方

3.flex-flow:是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap

4.justify-content:主轴上对齐方式

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-around:两侧的间隔相等
  • space-between:两端对齐,每一项间隔相等
  • space-evenly:每一项和每一项间隔  每一项和容器间隔相等

5.align-items:交叉轴上的对齐方式

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度。

3.布局

等高布局

.item {    width: 400px;    height: 300px;    background: skyblue;    display: flex;    justify-content: space-between;    padding: 5px;}.item div {    width: 100px;    font-size: 20px;    background: pink;}.item div p {		text-align: center;}

左侧宽度固定,右侧自适应布局

html, body {    margin: 0;    padding: 0;}.container {    display: flex;    width: 100%;    height: 100vh;    background: skyblue;}.left-tree {    width: 200px;    height: 100%;    background: pink;}.main {		flex: 1 1 auto;}

粘性页脚:无论中间的内容有多少,页脚始终在底部展示

html, body {    margin: 0;    padding: 0;}.container {    display: flex;    flex-direction: column;    width: 100%;    height: 100vh;}.header {    width: 100%;    height: 60px;    background: pink;}.main {    flex: 1 1 auto;    background: skyblue;}.footer {    width: 100%;    height: 60px;    background: pink;}
举报

相关推荐

flex弹性布局

弹性布局flex

Flex弹性布局

flex(弹性)布局

Flex(弹性布局)

弹性盒子(flex布局)

Flex弹性盒子布局

图示flex弹性盒布局

0 条评论