欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

弹性布局(伸缩布局)的使用教程

程序员文章站 2023-08-24 19:04:19
弹性布局(伸缩布局)的使用  css3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用。(兼容性不好) 必要元...

弹性布局(伸缩布局)的使用

 css3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用。(兼容性不好)

必要元素:

指定一个盒子为伸缩盒子,等于开启弹性布局给该盒子设置 display:flex;

  设置属性来调整此盒子的子元素的布局方式:如 flex-direction;

  明确主侧轴及方向

  可互换主侧轴,也可改变方向

各属性:

设置主轴方向

a) flex-direction:row(默认属性)

row:从左往右

b) flex-direction:row-reverse

row-reverse从右向左排列

c) flex-direction:column

竖直反向,从上往下

d) flex-direction:column-reverse

  1. 竖直方向,从下往上

主轴的对齐方式

a) justify-content:flex-start;

从主轴开始的方向对齐

b) justify-content:flex-end

从主轴结束的方向对齐

c) justify-content:center

居中对齐(水平/竖直)

d) justify-content:space-around

平分父盒子空间

e) justify-content:space-between

  1. 两端对齐,中间平分

侧轴对齐方式

a) align-items:flex-start

从侧轴开始的方向对齐

b) align-items:flex-end

从侧轴结束的方向对齐

c) align-items:center

在侧轴方向上居中

d) align-items:baseline

基线对齐,与flex-start等效

e) align-items:stretch

拉伸,和父盒子高度一样 有高度不会被拉伸

伸缩比例

a) flex:number

b) 不设置就不参与平分

元素换行

a) flex-wrap:wrap; 换行,控制伸缩盒子里面的元素

b) flex-wrap:nowrap; 默认不换行 会自动缩减宽度

控制 换行 堆叠的元素

a) align-content: flex-start

    起始点对齐 各行向弹性盒容器的起始位置堆叠

b) align-content: flex-end;

    终止点对齐 将结尾铺满 开头空着

c) align-content: center ;

    居中对齐,各个盒子向弹性盒容器的中间位置堆叠/y轴中间

d) align-contnt: space-around;

四周环绕:各行在弹性盒容器中平均分布

e) align-content: space-between;

顶端和底部对齐,中间部分为空

f) align-content: stretch ;

    拉伸 高度会自适应

align-self; 覆盖父元素设置的align-items

       align-self: stretch

flex-start / flex-end / center / stretch

侧轴起始点对齐/终止点对齐/居中对齐/拉伸