关于css:关于css3弹性伸缩盒

用处

  • 弹性盒子对于前端web网页布局来说,有着无足轻重的作用,挪动端也是如此。把握了弹性盒子用法,对于目前编写自适应页面很重要。把握这种布局规定,是一项必备技能。

弹性伸缩盒模型阐明

  • 主轴(main axis)是沿着 flex 元素搁置的方向延长的轴(比方页面上的横向的行、纵向的列)。该轴的开始和完结被称为 main startmain end**。
  • 穿插轴(cross axis)是垂直于 flex 元素搁置方向的轴。该轴的开始和完结被称为 cross startcross end**。
  • 设置了 display: flex 的父元素(在本例中是 <section>)被称之为 *flex 容器(flex container)。
  • 在 flex 容器中体现为柔性的盒子的元素被称之为 flex 项flex item

罕用的属性

1.flex-direction(指定弹性容器中子元素排列形式)

属性:row 默认值。元素将程度显示,正如一个行一样。
   row-reverse 以相同的程序。
   column 元素将垂直显示,正如一个列一样。
   column-reverse 与 column 雷同,然而以相同的程序。

2.flex-wrap (属性规定flex容器是单行或者多行,同时横轴的方向决定了新行重叠的方向。)
` nowrap默认值。规定元素不拆行或不拆列。
wrap规定元素在必要的时候拆行或拆列。
wrap-reverse规定元素在必要的时候拆行或拆列,然而以相同的顺 序。`

3.align-items 属性定义flex子项在flex容器的以后行纵轴方向上的对齐形式,就是规定高低排行的款式。

stretch 默认值。我的项目被拉伸以适应容器。
center 我的项目位于容器的核心。
flex-start 我的项目位于容器的结尾。
flex-end 我的项目位于容器的结尾。

baseline 我的项目位于容器的基线上。

4.justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐形式。
flex-start 我的项目位于容器的结尾。
flex-end 我的项目位于容器的结尾。
center 我的项目位于容器的核心。
space-between 我的项目位于各行之间留有空白的容器内。

space-around 我的项目位于各行之前、之间、之后都留有空白的容器内。

弹性子元素属性

1.order属性

.flex-container .flex-item { order: <integer>; }

<integer>:用整数值来定义排列程序,数值小的排在后面。能够为负值,默认为0。
2.align-self设置或检索弹性盒子元素本身在侧轴(纵轴)方向上的对齐形式。(跟那个align-items相似)

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据