博客列表 >前端-第六课-弹性容器-九期线上班

前端-第六课-弹性容器-九期线上班

王玉龙℡¹³⁵⁵²⁰⁶²¹³⁹
王玉龙℡¹³⁵⁵²⁰⁶²¹³⁹原创
2019年11月05日 19:54:54597浏览

1、所有元素均可转弹性容器,但必须是子元素,写代码时要写被转元素的父元素。

2、display:flex    元素转为块级弹性容器      display:inline-flex   转为行内块级弹性容器

3、方向选择:

属性:flex-direction   

值:row  默认   主轴从左到右

     row-reverse    反向,从右到左

     column    垂直,从上到下

   column-reverse     垂直  从下到上

3、换行:

     属性;flex-wrap

     值:wrap    换行

            nowrap   不换行(默认)

          wrap-reverse   反向排列

4、主轴方向选择及是否换行属性

    属性:flex-flow:方向   是否换行     有两个 值 第一个值表示方向,第二个值表示是否换行,中间用空格隔开。

5、主轴对齐方式及控件分布

属性:

          整体对齐

             justify-content:flex-start     默认值       整体从起点排列

             justify-conter:flex-end      整体从终点开始排列

              justify-content:conter   整体居中

空间分布:

justify-content:space-between      两边紧贴,中间平均分布空间

justify-content:space-around       两边边距相等,中间边距是两边的2倍

justify-content:space-evenly         所有元素边距相等

6、垂直整体对齐

align-items:strech    默认,整体垂直拉伸

align-items:flex-start     整体从起点开始排列

align-items:flex-end      整体从终点开始排列

align-items:conter          整体居中

7、多行垂直对齐及空间分布

align-content:space-between      上下贴边,中间平均分配

align-content:space-around         两边边距相等,中间边距是两边的两倍

align-content:space-evenly          所有边距相等



上一条:1104作业下一条:弹性布局-弹性容器
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议