CSS Flexible Box Layout

Flexbox布局

最新推荐文章于 2025-09-10 10:09:14 发布

原创最新推荐文章于 2025-09-10 10:09:14 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种新的CSS布局方式——Flexbox布局。通过调整display属性及新增的8个属性，如box-orient、box-pack等，可以实现更灵活的网页布局。文章通过一个具体的HTML示例展示了如何使用Flexbox进行布局。

CSS Flexible Box Layout 是一直比较新的布局方式，现在支持比较好的浏览器是firefox，chrome。所以下面的例子只可以在firefox，chrome下面运行才可以看到效果。

Flexbox 为 display 属性赋予了一个新的值（即 box 值），还为我们提供了 8 个新的属性：

box-orient

box-pack

box-align

box-flex

box-flex-group

box-ordinal-group

box-direction

box-lines

常用 Flexbox 样式属性

用于框的样式

display: box

该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。

box-orient

值：horizontal | vertical | inherit

框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。

box-pack

值：start | end | center | justify

设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。

box-align

值：start | end | center | baseline | stretch

基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。

用于框的子代的样式

box-flex

值：0 | 任意整数

该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0，也就是不具有弹性。

上面的 box-flex-group、box-ordinal-group、box-direction 和 box-lines 属性我就不介绍了，因为老实说，您的大部分 Flexbox 作品都未必会用到这些。

下面是做实验的一个小例子，用flex box layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
* {
	border: none;
	margin: 0;
	padding: 0;
}
h1 {
	font: bold 20px Tahoma;
}
h2 {
	font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup {
	display: block;
}
body {
	width: 100%;
	display: -webkit-box;
	-webkit-box-pack: center; /*设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。*/
	-webkit-box-align: center;
	
}
#wrapper {
	max-width: 1000px;
	margin: 20px 0px;
	display: -webkit-box; /*可将此元素及其直系子代加入弹性框模型中式显示*/
	-webkit-box-orient: vertical; /*框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。*/
	-webkit-box-flex: 1; /*该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0，也就是不具有弹性。*/
}
#top_header {
	background: yellow;
	border: 3px solid black;
	padding: 20px;
}
#top_menu {
	border: red;
	background: #ccc;
	color: white;
}
#top_menu li {
	list-style: none;
	display: inline-block;
	padding: 5px;
}
#new_div {
	display: -webkit-box;
	-webkit-box-orient: horizontal; /*框的子代是如何排列的为水平对齐*/
	border: 1px solid #ccc;
	background: #C60;
}
.main_section {
	border: 1px solid blue;
	-webkit-box-flex: 1; /*让当前div和子元素可伸缩*/
	margin: 20px;
	padding: 20px
}

#side_news {
	border: 1px solid red;
	width: 220px;
	margin: 20px 0px;
	padding: 30px;
	background: #66cccc;
}
#footer {
	text-align: center;
	padding: 20px;
	border-top: 2px solid green
}
</style>
<body>
<div id="wrapper">
  <header id="top_header">
    <div id="logo"> </div>
    <h1>Welcome to this site!</h1>
  </header>
  <nav id="top_menu">
    <ul>
      <li><a href="#">Index</a></li>
      <li><a href="#">Doc</a></li>
      <li><a herf="#">About</a></li>
    </ul>
  </nav>
  <div id="new_div">
    <article class="main_section">
      <header>
        <hgroup>
          <h1>Article title</h1>
          <h2>Sub title of  article</h2>
        </hgroup>
      </header>
      <p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p>
      <footer> written by robter; </footer>
    </article>
    <article class="main_section">
      <header>
        <hgroup>
          <h1>Article title 2</h1>
          <h2>Sub title of  article2</h2>
        </hgroup>
      </header>
      <p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p>
      <footer> written by robter; </footer>
    </article>
  <aside id="side_news">
    <h4>News</h4>
    <p> Ncik buy a new dog;He love it very much; </p>
  </aside> 
</div>
  <footer id="footer"> <span>Copyright 2012-8 xxx@gmail.com</span> </footer>
</div>
</body>
</html>