CSS Flex 常用布局

🌙
手机阅读
本文目录结构

六、flex 布局 弹性布局(属于一维布局),给予容器控制内部元素的宽度、高度的能力。便于实现垂直居中的效果。

大部分浏览器都能支持,在 webkit 内核的浏览器需要加上 -webkit 前缀。

容器的 6 个属性:
flex-direction:row | row-reverse | column | column-reverse;  // 决定主轴的方向
flex-wrap:nowrap | wrap | wrap-reverse; // 决定项目换行的情况
justify-content: flex-start | flex-end | center | space-between | space-around; // 项目在主轴的对齐方式
align-items:  flex-start | flex-end | center | space-between | space-around; // 项目在交叉轴上的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch; // 多根轴线的对齐方式,只有一根时则无效

flex-flow: <flex-direction> || <flex-wrap>; //flex-direction 属性和 flex-wrap 属性的简写形式,

项目的 6 个属性:
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

https://www.miidc.com/news/content50642.html

https://gitee.com/chendaiming/flex_layout#flex%E5%B8%B8%E7%94%A8%E5%B8%83%E5%B1%80

项目介绍 flex 简单布局,导入 css 后直接使用

使用说明 1. 以行布局 .rbox 使用方法:

<div class="rbox">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

结果: 0

  1. 以列布局 .cbox 使用方法:

    <div class="cbox">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    

结果: 0

  1. 行布局自动换行 .rbox_wrap 使用方法:

    <div class="rbox_wrap">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    </div>
    

结果: 0

  1. 布局参数 .df_1 ~ .df_9 使用方法:

    <div class="rbox">
    <span class="df_1">1</span>
    <span class="df_1">2</span>
    <span class="df_1">3</span>
    </div>
    <div class="rbox">
    <span class="df_1">1</span>
    <span class="df_2">2</span>
    <span class="df_3">3</span>
    </div>
    

结果: 0 0

  1. 内容 X 轴布局(左右布局) 使用 rbox: .box_x_center 左右居中 .box_x_start 靠左显示 .box_x_end 靠右显示 使用 cbox: .box_x_center 上下居中 .box_x_start 靠上显示 .box_x_end 靠下显示 使用方法:

    <div class="rbox box_x_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    <div class="cbox box_x_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    

结果:

rbox box_x_center
cbox box_x_center
  1. 内容 Y 轴布局 (上下布局) 使用 rbox: .box_y_center 上下居中 .box_y_start 靠上显示 .box_y_end 靠下显示 使用 cbox: .box_y_center 左右居中 .box_y_start 靠左显示 .box_y_end 靠右显示 使用方法:

    <div class="rbox box_y_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    <div class="cbox box_y_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    

结果: 0 0

  1. 内容 X + Y 轴居中 .box_center 使用方法:

    <div class="rbox box_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    <div class="cbox box_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    

结果: 0 0

  1. 单个内容布局 (同上) .box_1_center .box_1_start .box_1_end 使用方法:

    <div class="rbox">
    <span>1</span>
    <span class="box_1_center">2</span>
    <span>3</span>
    </div>
    <div class="cbox box_center">
    <span>1</span>
    <span class="box_1_center">2</span>
    <span>3</span>
    </div>
    

结果: 0 0

  1. 多行内容布局 (配合 rbox_wrap 使用 ,没有添加 cbox_wrap, 不常用,也可直接配合 box_x_xxx 和 box_y_xxx 使用) .box_wrap_center 内容居中 .box_wrap_start 靠左 .box_wrap_end 靠右 .box_wrap_space_a 项目之间的间隔都相等 .box_wrap_space_b 两端对齐,项目之间的间隔都相等 使用方法:

    <div class="rbox_wrap box_wrap_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    </div>
    <div class="rbox_wrap box_wrap_space_a">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    </div>
    <div class="rbox_wrap box_wrap_space_a box_center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    </div>
    <div class="rbox_wrap box_wrap_space_a box_x_end">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    </div>
    

结果: 0 0 0 0

  1. 项目之间的间隔都相等 .box_space_a
  2. 两端对齐,项目之间的间隔都相等 .box_space_b 最后 内容也可以使用 flex 布局

    <div class="rbox_wrap">
    <span class="rbox box_center">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    </div>
    

0

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe
axihe
新版红宝书,最低44元! axihe 京东购买 / 天猫购买 / 图灵购买