Flex布局

栏目: CSS · 发布时间: 5年前

内容简介:网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 +float属性。针对于某些特殊布局就显得非常不方便,例如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有新版主流浏览器的支持,这意味着,现在就能很安全地使用这项功能。

网页布局(layout)是CSS的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 +float属性。针对于某些特殊布局就显得非常不方便,例如,垂直居中就不容易实现。

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有新版主流浏览器的支持,这意味着,现在就能很安全地使用这项功能。

特点

1.任何元素都可以指定为flex布局

2.设置flex布局后,子元素float、clear和vertical-align属性将失效。

flex属性

flex子元素属性

1.

5.

flex-direction

决定flex布局排版方向,默认为横向排版

<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
复制代码
.flex{
  display: flex;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
复制代码

row

(默认值)横向排版,起点为左上角

.flex{
  flex-direction: row;
}
复制代码
Flex布局

row-reverse

横向排版,起点为右上角

.flex{
  flex-direction: row-reverse;
}
复制代码
Flex布局

column

竖向排版,起点为左上角

.flex{
  flex-direction: column;
}
复制代码
Flex布局

column-reverse

竖向排版,起点为左下角

.flex{
  flex-direction: column-reverse;
}
复制代码
Flex布局

flex-wrap

决定flex超出主方向布局位置时是否换行,以及换行方式

<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
复制代码
.flex{
  display: flex;
  width: 360px;
  height: 360px;
  flex-direction: row;
  justify-content: space-between;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
复制代码

nowrap

默认值,不换行

.flex{
  flex-wrap: nowrap;
}
复制代码
Flex布局

wrap

换行,常规排版

.flex{
  flex-wrap: wrap;
}
复制代码
Flex布局

wrap-reverse

反向换行,从最下方往上方排版

.flex{
  flex-wrap: wrap-reverse;
}
复制代码
Flex布局

flex-flow

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

flex-flow: <flex-direction> <flex-wrap>
复制代码

justify-content

决定flex布局在主轴方向上的排版方法

<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
复制代码
.flex{
  display: flex;
  border:1px solid blue;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  flex-direction: row;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
复制代码

flex-start

默认值,沿主轴方向依次排列,无特殊样式(左对齐)

.flex{
  justify-content: flex-start;
}
复制代码
Flex布局

flex-end

沿主轴方向反向依次排列,无特殊样式(右对齐)

.flex{
  justify-content: flex-end;
}
复制代码
Flex布局

center

主轴方向居中排列,无特殊样式(居中)

.flex{
  justify-content: center;
}
复制代码
Flex布局

space-around

主轴方向依次排列,子元素与子元素见自动生成等宽间隔,子元素与子元素的间隔子元素与父元素边框之间的间隔的两倍

.flex{
  justify-content: space-around;
}
复制代码
Flex布局

space-between

主轴方向依次排列,两端无间隔,子元素与子元素见自动生成等宽间隔

.flex{
  justify-content: space-between;
}
复制代码
Flex布局

align-items

align-items: flex-start | flex-end | center ||

针对子元素在单一主轴上(一行上)交叉轴的排版方式

flex-start,flex-end,center规则和相同值的规则一样,将主轴替换为交叉轴即可

<div class="flex">
		<div style="font-size:22px;">1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div style="font-size:22px;">5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div style="font-size:22px;height:auto;">9</div>
	</div>
复制代码
.flex{
  display: flex;
  border:1px solid blue;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 66px;
  border: 1px solid red;
}
复制代码

baseline

.flex{
  align-items: baseline;
}
复制代码
Flex布局

stretch

.flex{
  align-items: stretch;
}
复制代码
Flex布局

align-content

规则和相同值的规则一样,将主轴替换为交叉轴即可,在单一主轴(项目只有一行)上该属性无效

flex子元素属性

作用于flex项目下的直接子元素

order

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item{
  order: <integer>;
}
复制代码

flex-grow

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

将剩余空间等比缩放大小,分配给当前指定项目

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

.item{
  flex-grow:<float>;
}
复制代码

flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

.item{
  flex-shrink:<float>;
}
复制代码

flex-basis

重定义项目大小,默认值auto,即项目本身大小

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

自我感觉该属性用处不大

flex

flex属性是属性和属性和属性的简写方式

flex: <flex-grow> <flex-shrink> <flex-basis>
复制代码

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex css 实例

.flex{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  position: relative;
}
.flex.row{
  flex-flow: row nowrap;
}
.flex.wrap{
  flex-wrap: wrap;
}
.flex>.auto{
  width: 100%;
  flex-grow: 1;
  position: relative;
}
.row>.auto{
  width: auto;
  height: 100%;
}
.absFull{ /*针对部分浏览器使用.auto样式导致页面样式错乱*/
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

小团队构建大网站:中小研发团队架构实践

小团队构建大网站:中小研发团队架构实践

张辉清 等 / 电子工业出版社 / 2019-1 / 69

《小团队构建大网站:中小研发团队架构实践》结合作者近几年的工作经验,总结了一套可直接落地、基于开源、成本低、可快速搭建的中小研发团队架构实践方法。《小团队构建大网站:中小研发团队架构实践》共5篇22章,开篇是本书的导读;架构篇是设计思想的提升,包括企业总体架构、应用架构设计、统一应用分层等;框架篇主讲中间件和工具的使用,包括消息队列、缓存、Job、集中式日志、应用监控和微服务等;公共应用篇是技术与......一起来看看 《小团队构建大网站:中小研发团队架构实践》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试