认识flex布局 flex布局的主轴对齐方式介绍

认识flex布局

flex布局弹性布局 使用flex布局 标签之间没有元素之分(块 行内 行内块) 可以随意设置宽高

父元素添加display:flex 弹性容器
子元素自动变成弹性盒子(弹性盒子没有宽高的情况下会自动根据父元素的宽高调整大小) 

 

弹性盒子为了方便理解可以理解为 分为X轴水平方向从左往右 Y轴垂直方向从上往下

display:flex布局的组成部分:

弹性容器(父元素)

弹性盒子(子元素)

弹性盒子的摆放顺序:

以下为了方便理解主轴和侧轴的方向 可以将主轴看为X轴水平方向 Y轴垂直方向
(默认情况下主轴X侧轴Y 后续可以根据需求更改 例如将默认值主轴X轴改成Y轴)
主轴侧轴对齐方式添加在父元素身上 控制父元素中所有子盒子的对齐方式

 

为了大家方便理解可以参考下面这张图片理解排列方式

主轴对齐方式开始：

  /* 默认情况下 主轴从起点开始排列 */
            justify-content: flex-start;

 

 /*  主轴从终点开始排列 */
            justify-content: flex-end;

 

  /*  主轴所有子元素盒子水平居中 */
           justify-content: center;

 

 /*  主轴控制所有子元素盒子间距1:2 */
           justify-content: space-around;

 

/*  父盒子中子元素左右盒子靠边 中间盒子自适应 */

最左最右盒子靠边之后 中间的盒子平分剩下的宽度
          justify-content: space-between; 

 

  /* 父元素中的子元素盒子按照1:1的距离分开 */
            justify-content: space-evenly;

 

 1:1的情况下盒子不靠边 盒子之间的间距1:1