CSS3 Flexbox 布局

发布于 2021-11-04 19:15:02 字数 2732 浏览 1104 评论 0

一个 Flexbox 布局是由一个伸缩容器（flex containers）和在这个容器里的伸缩项目（flex items）组成。

Flex 容器不是块容器，因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。

如果元素 display 的值指定为 inline-flex，而且元素是一个浮动元素或绝对定位元素，则 display 的计算值是 flex。

所有的顺序都是按照文档默认的从左向右，如果你的 html dir=“rtl” 则相反。

好比这样：

.container {
  display: flex;/* 定义伸缩容器 */
  flex-flow: row | column |row wrap;
   /* 伸缩项目排列由上至下排列 | 伸缩项目排列由左向右排列 | 
   当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列 */
  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 | baseline | stretch;
 /* 设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式：
 伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边 | 伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 | 
 伸缩项目的外边距盒在该行的侧轴上居中放置 | 侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边 |
 如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。*/
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  /* 调准伸缩行在伸缩容器里的对齐方式：
  各行向伸缩容器的起点位置堆叠 | 各行向伸缩容器的结束位置堆叠 |各行向伸缩容器的中间位置堆叠 | 
  各行在伸缩容器中平均分布 | 各行在伸缩容器中平均分布，在两边各有一半的空间 | 各行将会伸展以占用剩余的空间 */
}

一个完整的例子

<!DOCTYPE html >
<html>
	<head>
	<title>flexbox</title>
	<style type="text/css">
		html, body {height: 100%; background: lightgrey; margin: 0;}
		.container {display: -webkit-flex; display: flex; -webkit-flex-flow: row; flex-flow: row; max-width: 1000px; height: 100%; margin: auto;}
		.main {width: 60%; margin: 20px 0; padding: 7px; background: deepskyblue;}
		.left {-webkit-flex: 1; flex: 1;}
		.right {-webkit-flex: 2; flex: 2;}
		.nav {margin: 20px 15px; padding: 7px; background: hotpink;}
	</style>
	</head>
	<body>
  <div class="container">
    <nav class="nav left"> </nav>
    <section class="main">
      <h1>Three column layout example</h1>
      <p>Flexbox makes a layout like this trivially easy. No messing about with floats, clearing
        or precise positioning!</p>
    </section>
    <nav class="nav right"> </nav>
  </div>
</body>
</html>

点击这里查看 demo。

分享到QQ

分享到微博