css3弹性盒子

时间:2019-07-04
本文章向大家介绍css3弹性盒子,主要包括css3弹性盒子使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、控制盒子(外面的叫盒子,里面的叫项目)

  1.display: flex;(inline- flex)设置弹性盒子(行内)。

  2.弹性盒子的轴的方向为一个重要的内容

     flex - direction : row; 默认值是row 表示 主轴的方向是 →

     flex - direction : row-reverse; 和row的方向相反

       flex - direction : column; 项目呈列显示,主轴方向为↓。

       flex - direction : column-reverse;  项目呈列显示,方向为与column相反。

  3.当项目在必要的时候进行拆分

       flex-wrap: nowrap;nowrap是默认值。规定不会拆行或者列。

     flex-wrap: wrap; 规定在必要的时候就拆行列。

     flex-wrap: reverse; 规定灵活的项目在必要的时候就要反向拆行和列。

  4.   基于主轴的对其方式

     justify-content:flex-start; 项目从容器的开始显示

     justify-content:flex-end ; 项目从容器的结束处开始显示

     justify-content:center ; 项目居于盒子的中间

     justify-content:space-between; 项目两头对对齐,项目之间平均之间的距离,保持中间位置留白且距离相等。

     justify-content:space-around ; 各个项目两头平铺开来,各个项目之间留白,而且和容器之间也留有空白。

  5. 基于交叉轴的对齐方式。

     align- item : center  项目居于盒子的中间

     align- item : flex-start;   项目从容器的开始显示

    align- item : flex-end;  项目在结束容器结束处

    align- item : stretch; 默认值,项目会被拉伸适应容器。(在项目没有设置高度的情况下)

    align - item: baseline; 基于文本基线对齐。

二、项目里的属性

  1. order: 0; 默认值是0,order值越小显示越靠前。和z-index差不多,属性值的用法与其相反。

  2.align - self :auto   默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

   align - self :stretch  元素拉伸适应容器

      align - self :包含属性值有 baseline,center,flex-start, flex-end 用法效果和上面的一样。 

$flag 上一页 下一页