139-6504-8393

CSS中的弹性布局该怎么使用

录入编辑:明图网络 | 发布时间:2021年09月09日

CSS中的弹性布局该怎么使用呢?下面合肥网站建设小编就来为大家详细的讲解一下!希望对大家能有所帮助!

Flex(弹性布局),是一种响应式布局,能自动伸缩盒模型达到自适应的效果。

弹性布局由弹性容器(flex container)和弹性项目(flex item)组成。

在弹性容器中,水平方向称为主轴(main axis)(起点main start,终点main end);垂直方向称为纵轴(cross axis)(起点cross start,终点cross end)。

在弹性项目中,元素的宽度称为main size,高度称为cross size。

CSS中的弹性布局该怎么使用

弹性容器

通过display: flex属性,可将元素声明块级弹性容器;通过dsplay: inline-fex,可将元素声明为行内弹性容器。

flex-direction属性

flex-direction指定主轴(main cross)的方向,即元素排列的方向。

flex-wrap属性

flex-wrap属性,指定弹性项目的换行方式,即弹性项目超过一行时如何换行。

flex-wrap: no-wrap | wrap | wrap-reverse

// 属性解释:no-wrap: 不换行(默认)wrap: 正常换行wrap-reverse: 换行,第一行在下方,从下往上换行

flex-flow属性

flex-flow属性,为flex-direction和flex-wrap的合并属性。

// 第一个为flex-direction,第二个为flex-wrapflex-fow: <flex-direction> <flex-wrap>

justify-content属性

justify-content属性,指定弹性内容在主轴上的排列方式。

justify-content: flex-start | flex-center | flex-end | space-between | space-around

align-items属性

align-items属性,指定弹性项目在纵轴上的对齐方向。

align-items: flex-start | center | flex-end | base-line | stretch// 属性解释:

flex-start: 项目对齐纵轴的起点(cross start)

center: 居中

flex-end: 项目对齐纵轴的终点(cross end)

baseline: 基于基线对齐

stretch: 拉伸(默认),从起点(cross start)到终点(croos end)

align-content属性

align-content属性,指定当主轴(main axis)随项目换行时,多条主轴线如何对齐。

align-content: flex-start | center | flex-end | space-between | space-around | stretch

为什么没有justify-items属性呢?

尽管flex看起来像二维布局,但其实是个一维布局,纵轴(cross axis)没有换行(wrap)的行为,自然就没有justify-items属性。

上一篇:合肥网站建设小编告诉你网站域名在进行备案之前需要准备哪些资料?
下一篇:没有了
热门服务和内容
  • 明图微信公众号

    微信公众号

  • 合肥小程序制作

    客服微信号

  • 业务咨询 139-6504-8393

    (7*14小时)8:30-22:30 贴心服务

    合肥市蜀山区长江西路669号拓基城市广场B座11层

    在线咨询
    关于明图 | COPYRIGHT © 2008-2020 合肥明图网络科技有限公司 ALL RIGHTS RESERVED 备案编号: 皖ICP备14002487号-3