display：grid 兼容性（display flex 兼容性）



横向布局 ： 弹性盒子

• 给父级元素设成弹性盒子 display:flex;
• flex-direction 控制弹性盒子内子元素的排列方向

        - flex-direction:column; 纵向
        - column-reverse; 纵向反转 （从下往上，元素翻转）
        - row: 横向
        - row-reverse: 横向反转（从右向左并反转）

• flex-wrap 控制弹性盒子内子元素是否换行
  • flex-warp:nowrap; 默认值。不换行，所有的flex子项都会在一行显示，即使容器内的空间不足以显示所有的子项。
  • wrap 允许flex子项换行，如果一行空间不足以显示所有子项，剩余的子项会自动换行到下一行。
• order 设置弹性盒子内子元素的排列顺序 取值是整数，越小越靠前
  • order:10;
• flex 控制弹性盒子内子元素的缩放 复合属性
  • flex-grow: 1 ; 拉伸因子

         flex-grow: 1 ; 拉伸因子

        - flex-basis:  ;基准因子

                flex-basis 属性在CSS中定义了flex项目在flex容器中分配空间之前默认的大小，即在进行flex分配之前，项目的大小。它是flex布局中的一个重要属性，用于控制flex项目的基准大小，这个大小可以是固定的（比如像素、百分比等），也可以是自动。

• justify-content 控制弹性盒子内子元素的分布方式
  • justify-content ：flex-start; 整体会跑到左边
  • justify-content ：flex-end; 整体会跑到右边
  • justify-content ：flex-; 空隙会放到元素和元素之间

        - justify-content ：flex-around;  空隙会放到元素周围

• align-items 控制弹性盒子内子元素在垂直方向上的对齐方式

        - start
        - center  中心在一条轴线上
        - end
        - baseline 首行顶部对齐

• align-content :控制弹性盒子内多行的分布方式
  • flex-start
  • center
  • space-around
  • space-evenly

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/59854.html