使用flex布局的示例分析

发布时间:2021-05-11 09:24:00 作者:小新
来源:亿速云 阅读:191

这篇文章主要介绍了使用flex布局的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

Flex布局

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,自由的操作容器中元素(项目)的排列方式

任何一个容器都可以指定为 Flex 布局。

.box{ 
      display: flex;
 }

行内元素也可以使用 Flex 布局。

 .box{  
      display: inline-flex; 
  }

Webkit 内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

使用flex布局的示例分析

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性

容器的6个属性

1、flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

使用flex布局的示例分析

值可能为4个

2、flex-wrap属性

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

使用flex布局的示例分析

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

(1)nowrap(默认):不换行。

使用flex布局的示例分析

(2)wrap:换行,第一行在上方。

使用flex布局的示例分析

(3)wrap-reverse:换行,第一行在下方。

使用flex布局的示例分析

3、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
    justify-content: flex-start | flex-end | center |
    space-between | space-around;
}

使用flex布局的示例分析

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

5、align-items属性

align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

使用flex布局的示例分析

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

6、align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

使用flex布局的示例分析

该属性可能取6个值。

感谢你能够认真阅读完这篇文章,希望小编分享的“使用flex布局的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 弹性(Flex)布局的使用
  2. HTML中弹性布局Flex的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flex布局

上一篇:Vue.use指的是什么意思

下一篇:python32指的是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》