flex的基本代码

dxiaofanb

于 2021-10-25 09:07:59 发布

阅读量230

点赞数

文章标签： php

本文链接：https://blog.csdn.net/dxiaofanb/article/details/120945691

版权

本文详细介绍了CSS Flexbox布局中的flex-direction和justify-content属性，包括它们的作用和不同取值。flex-direction决定了子元素在容器中的排列方向，而justify-content则控制了子元素在主轴上的对齐方式，包括左对齐、右对齐、居中、两端对齐和均匀分布等。通过这些属性，开发者可以更灵活地设计网页和应用的布局。

摘要由CSDN通过智能技术生成

    display: flex; 父盒子
    flex-direction: row; 轴线右
   flex-direction: row-reverse; 轴线左
   flex-direction: column; 轴线下
   flex-direction: column-reverse;轴线上
   flex-flow: nowrap; 不换行
   flex-flow: wrap; 换行
   flex-flow: wrap-reverse; 换行第一行在下面
   justify-content: flex-start; 主轴左对齐
   justify-content: flex-end; 主轴右对齐
   justify-content: center; 居中
   justify-content: space-between; 左右对齐
   justify-content: space-around; 扩散居中