flex弹性盒模型

最新推荐文章于 2023-08-18 22:33:32 发布

曼陀罗90

最新推荐文章于 2023-08-18 22:33:32 发布

阅读量117

点赞数

文章标签： css3 flex

本文链接：https://blog.csdn.net/yueyue_226/article/details/115346416

版权

flex是弹性盒子，display：flex用来定义一个盒子的模型为弹性盒子，弹性盒子默认子元素的块级元素是并排展示的

display: flex;定义一个盒子，定义盒子是写在父盒子CSS上

/* 子元素的展示方式是垂直方向展示，row是默认水平方向展示 */
  flex-direction: row;
  flex-direction: column;
 /* 子元素的换行wrap是换行，nowrap是不换行 */
 flex-wrap: wrap;
 flex-wrap: nowrap;
 /* flex-flow是子元素的排列方向和换行的简写方式 */
  flex-flow:column wrap;

justify-content主轴

/* justify-content用来控制子元素在主轴上的排列方式justify-content有多个属性 */
 /*flex-start 默认起点位置排列 */
 justify-content: flex-start;
 /* flex-end紧靠盒子的终点 */
 justify-content: flex-end;
 /* center让子元素在盒子方向的居中，如果是子元素水平排列则水平居中，垂直排列则垂直居中 */
 justify-content: center;
 /* space-between元素两侧紧贴容器，中间元素平均分配 */
 justify-content: space-between;
 /* space-around元素两侧都有距离，元素与元素之间的距离是元素与容器之间距离大一倍 */
 justify-content: space-around;
 /* space-evenly元素间的距离平均分配 */
 justify-content: space-evenly;

align-items交叉轴

   align-items交叉轴方向上的排列 
    align-items: center;
    align-items: flex-end;
    align-items: flex-start;
    align-items: stretch;

align-content是设置元素在交叉轴上的对齐方式，只适用于多行，需要配合flex-wrap换行使用

   align-content: center;
   align-content: flex-end;
   align-content: flex-start;
   align-content: stretch;

.son {
  width: 100px;
  height: 100px;
  background: #fff56f;
  border: 1px solid;
  margin-bottom: 5px;
}

<body>
  <div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
    <div class="son">4</div>
    <div class="son">5</div>
    <div class="son">6</div>


  </div>
</body>

曼陀罗90

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性盒模型

flex是弹性盒子，display：flex用来定义一个盒子的模型为弹性盒子，弹性盒子默认子元素的块级元素是并排展示的display: flex;定义一个盒子，定义盒子是写在父盒子CSS上/* 子元素的展示方式是垂直方向展示，row是默认水平方向展示 */ flex-direction: row; flex-direction: column; /* 子元素的换行wrap是换行，nowrap是不换行 */ flex-wrap: wrap; flex-wrap: nowrap; /* fl
复制链接

扫一扫