CSS3布局相关样式学习
float属性或者position属性布局缺点
使用float属性或者position属性进行页面布局时有一个比较显著的缺点：就是第一个div元素与第二个div元素是个自独立的，因此如果在第一个div元素中加入一些内容，将会使得两个元素的底部不能对齐，导致页面中多处一块空白区域。
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用float属性进行页面布局的示例title>
<style type="text/css">
div{width: 20em;float: left;}
#div1{margin-right: 2em;}
#div3{width: 100%;background-color: yellow;height: 200px;}
style>
head>
<body>
<div id="div1">
<img src="test.JPG">
<p>示例文字1.相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。示例文字1.相对来说比较长的示例文字。示例文字。p>
div>
<div id="div2">
<p>示例文字2.相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。p>
div>
<div id="div3">
页面中其他内容
div>
body>
html>CSS3多栏布局
- column-count: 2表示分为两栏，这里将元素的宽度设置为多个栏目的总宽度
- column-width属性指定每一栏宽度而不设定元素的宽度，则需要在元素外面单独设立一个容器元素，然后指定该容器元素的宽度
- column-gap属性用来设置多栏之间的间隔距离
column-rule属性在栏与栏之间增加一条间隔线
使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，使用多栏布局的时候，需要将元素的宽度设置成多个栏目的总宽度，与使用float属性和position属性时的区别是：使用后两个属性时只需要单独设定每个元素的宽度即可，而使用多栏布局时，需要设定元素中多个栏目相加后的总宽度。
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用CSS3多栏布局方式使用示例title>
<style type="text/css">
#container{width: 50em;}
#div1{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 20em;
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-gap: 3em;
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
column-rule: 1px solid red;
-moz-column-rule: 1px solid red;
-webkit-column-rule: 1px solid red;
}
#div3{width: 100%;background-color: yellow;height: 200px;}
style>
head>
<body>
<div id="container">
<div id="div1">
<img src="test.JPG">
<p>示例文字1。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。p>
<p>示例文字2。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。p>
div>
<div id="div3">
页面中其他内容
div>
div>
body>
html>盒布局
在CSS3中，除了多栏布局之外，还可以使用盒布局解决前面所述使用float属性或position属性时左右两栏或多栏中底部不能对齐的问题。使用float属性或者position属性时，左右两栏或多栏中div元素的底部并没有对齐。
通过box属性来使用盒布局
这个例子在最外层的div元素上使用了box属性，并去除了子元素div的float属性
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用盒布局title>
<style type="text/css">
#container{
display:-moz-box;
display: -webkit-box;
}
#left-sidebar{width: 200px;padding: 20px;background-color: orange;}
#contents{width: 300px;padding: 20px;background-color: yellow;}
#right-sidebar{width: 200px;padding: 20px;background-color: green;}
#left-sidebar,#contents,#right-sidebar{box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
<div id="contents">
<h2>内容h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字p>
div>
<div id="right-sidebar">
<h2>右侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
div>
body>
html>盒布局与多栏布局的区别
盒布局与多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构的时候。
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒布局与多栏布局的区别title>
<style type="text/css">
#container{column-count: 3;-moz-column-count: 3;-webkit-column-count: 3;}
#left-sidebar{padding: 20px;background-color: orange;}
#contents{padding: 20px;background-color: yellow;}
#right-sidebar{padding: 20px;background-color: green;}
#left-sidebar,#contents,#right-sidebar{box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
<div id="contents">
<h2>内容h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字p>
div>
<div id="right-sidebar">
<h2>右侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
div>
body>
html>弹性盒布局
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
想让这三个div元素的总宽度等于浏览器窗口的宽度，而且能够随着窗口宽度的改变而改变。使用flex属性将盒布局变为弹性布局就可以了。
display: flex;设定弹性容器为弹性盒布局
flex 属性相对于同一容器其他灵活的项目，规定项目的长度。
<html lang="en">
<head>
<meta charset="utf-8">
<title>弹性盒布局title>
<style type="text/css">
#container{display: flex;}
#left-sidebar{width:200px;padding: 20px;background-color: orange;}
#contents{flex:1;padding: 20px;background-color: yellow;}
#right-sidebar{width:200px;padding: 20px;background-color: green;}
#left-sidebar,#contents,#right-sidebar{box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
<div id="contents">
<h2>内容h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字p>
div>
<div id="right-sidebar">
<h2>右侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
div>
body>
html>order属性–改变元素的显示顺序
使用弹性盒布局的时候，可以通过order属性来改变各个元素的显示顺序。按照从小到大的序号显示，可以为负值。
<html lang="en">
<head>
<meta charset="utf-8">
<title>改变元素的显示顺序title>
<style type="text/css">
#container{display: flex;}
#left-sidebar{order:3;width:200px;padding: 20px;background-color: orange;}
#contents{order:1;flex:1;padding: 20px;background-color: yellow;}
#right-sidebar{order:2;width:200px;padding: 20px;background-color: green;}
#left-sidebar,#contents,#right-sidebar{box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
<div id="contents">
<h2>内容h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字p>
div>
<div id="right-sidebar">
<h2>右侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
div>
body>
html>flex-direction-改变元素的排列方向
在CSS3中，使用flex-direction属性来指定多个元素的排列方向.flex-direction 顺序指定了弹性子元素在父容器中的位置。
- flex-direction:row;表示横向排列(默认值)
- row-reverse：横向反向排列
- column：纵向排列
- column-reverse：纵向反向排列
<html lang="en">
<head>
<meta charset="utf-8">
<title>改变元素的排列方向title>
<style type="text/css">
#container{display: flex;flex-direction:column-reverse;}
#left-sidebar{order:3;width:200px;padding: 20px;background-color: orange;}
#contents{order:1;flex:1;padding: 20px;background-color: yellow;}
#right-sidebar{order:2;width:200px;padding: 20px;background-color: green;}
#left-sidebar,#contents,#right-sidebar{box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
<div id="contents">
<h2>内容h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字p>
div>
<div id="right-sidebar">
<h2>右侧边栏h2>
<ul>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
<li><a href="#">超链接a>li>
ul>
div>
div>
body>
html>justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
- flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
- flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
- center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
- space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
- space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
各个属性的效果展示：
Demo: justify-content:flex-end;
<html lang="en">
<head>
<meta charset="utf-8">
<title>justify-content属性的使用示例title>
<style type="text/css">
#container{
display: flex;
border: 5px solid blue;
flex-direction:row;
width: 600px;
height: 30px;
justify-content:flex-end;
}
/*justify-content:flex-end;表示从main-end开始布局所有子元素*/
#text-a{background-color: orange;width: 100px;}
#text-b{background-color: yellow;width: 150px;}
#text-c{background-color: green;width: 200px;}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
Demo:
<html lang="en">
<head>
<meta charset="utf-8">
<title>align-items属性的使用示例title>
<style type="text/css">
/*align-items属性用于指定子元素的对齐方式
但是align-items属性指定的是cross axis轴方向(横向布局时cross axis轴方向为垂直方向，纵向布局时cross axis轴方向为水平方向)上的对齐方式
*/
#container{display: flex;border: 5px solid blue;flex-direction:row;width: 600px;align-items:flex-start;}
#div-a{background-color: orange;width: 100px;font-size: 12px;}
#div-b{background-color: yellow;width: 150px;font-size: 24px;}
#div-c{background-color: green;width: 200px;font-size: 36px;}
style>
head>
<body>
<div id="container">
<div id="div-a">示例文字div>
<div id="div-b">示例文字div>
<div id="div-c">示例文字div>
div>
body>
html>align-self属性
align-self 属性:用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式.
- auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
元素宽度与高度的自适应
<html lang="en">
<head>
<meta charset="utf-8">
<title>元素宽度与高度的自适应title>
<style type="text/css">
/*flex-direction:row;表示排列方向被设定为水平排列，三个元素的宽度为元素中内容的宽度，高度自动变为容器的高度*/
#container{display: flex;border: 5px solid blue;flex-direction:row;width: 500px;height: 300px;margin-bottom: 20px;}
#text-a{background-color: orange;}
#text-b{background-color: yellow;}
#text-c{background-color: green;}
#text-a,#text-b,#text-c{box-sizing: border-box;font-size: 1.5em;font-weight: bold;}
/*flex-direction:column;表示排列方向被设定为垂直排列，三个元素的高度为元素中内容的高度，宽度自动变为容器的宽度
虽然使用盒布局的时候，元素的高度和宽度具有一定程度的适应性，但是容器中总是还会留出一大片空白区域
*/
#container1{display: flex;border: 5px solid blue;flex-direction:column;width: 500px;height: 300px;margin-bottom: 20px;}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
<div id="container1">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>使用弹性盒布局来消除空白
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用弹性盒布局来消除空白title>
<style type="text/css">
/*
display:flex;表示弹性盒布局
flex-direction:row;表示排列方向为水平方向排列
*/
#container{border: 5px solid blue;display:flex;flex-direction:row;width: 500px;height: 300px;margin-bottom: 20px;
}
#container1{border: 5px solid blue;display:flex;flex-direction:column;width: 500px;height: 300px;
}
#text-a{background-color: orange;}
#text-b{background-color: yellow;flex:1;}/*设置了flex属性，使其宽度和高度自动扩大*/
#text-c{background-color: green;}
#text-a,#text-b,#text-c{font-size: 1.5em;font-weight: bold;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
<div id="container1">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>对多个元素使用flex属性
flex 属性用于指定弹性子元素如何分配空间。
- none：none关键字的计算值为: 0 0 auto
- flex-grow：定义弹性盒子元素的扩展比率
- flex-shrink：定义弹性盒子元素的收缩比率
- flex-basis：定义弹性盒子元素的默认基准值
<html lang="en">
<head>
<meta charset="utf-8">
<title>对多个元素使用flex属性title>
<style type="text/css">
/*
display:flex;表示弹性盒布局
flex-direction:column;表示排列方向为垂直方向排列
*/
#container{
display:flex;
flex-direction:column;
border: 5px solid blue;
width: 500px;
height: 300px;
}
/*
前两个div元素的高度都自动扩大了，而且扩大后前两个div元素的高度保持相等，而第三个div元素的高度仍保持为元素内容的高度
如果三个div元素的样式中都使用flex属性，则每个div元素的高度就等于容器的高度除以3
*/
#text-a{background-color: orange;flex:1;}
#text-b{background-color: yellow;flex:1;}
#text-c{background-color: green;}
#text-a,#text-b,#text-c{font-size: 1.5em;font-weight: bold;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>对多个元素使用flex属性title>
<style type="text/css">
/*
display:flex;表示弹性盒布局
flex-direction:column;表示排列方向为垂直方向排列
*/
#container{
display:flex;
flex-direction:row;/*表示横向排列*/
border: 5px solid blue;
width: 600px;
height: 300px;
}
/*
第一个div元素的高度并不等于其他两个div子元素的两倍
容器空白部分按元素的flex属性值分配
flex-grow样式属性用来调整子元素的宽度或者高度，当子元素的width样式属性值的总和小于容器元素的宽度或者高度值时使用
flew-shrink样式属性用来调整子元素的宽度或者高度，当子元素的width样式属性值的总和小于容器元素的宽度或者高度值时使用
*/
#text-a,#text-b,#text-c{
width:150px;
flex-grow:1;
font-size: 1.5em;
font-weight: bold;
box-sizing: border-box;
}
#text-a{background-color: orange;}
#text-b{background-color: yellow;flex-grow:3;}
#text-c{background-color: green;}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>对多个元素使用flex属性title>
<style type="text/css">
/*
display:flex;表示弹性盒布局
flex-direction:column;表示排列方向为垂直方向排列
*/
#container{
display:flex;
flex-direction:row;/*表示横向排列*/
border: 5px solid blue;
width: 600px;
height: 300px;
}
/*
flew-grow样式属性用来调整子元素的宽度或者高度，当子元素的width样式属性值的总和小于容器元素的宽度或者高度值时使用
flew-shrink样式属性用来调整子元素的宽度或者高度，当子元素的width样式属性值的总和小于容器元素的宽度或者高度值时使用
*/
#text-a{background-color: orange;}
#text-b{background-color: yellow;flex-shrink:3;}
#text-c{background-color: green;}
#text-a,#text-b,#text-c{
width:250px;
flex-shrink:1;
font-size: 1.5em;
font-weight: bold;
box-sizing: border-box;
}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>对多个元素使用flex属性title>
<style type="text/css">
/*
display:flex;表示弹性盒布局
flex-direction:column;表示排列方向为垂直方向排列
*/
#container{
display:flex;
flex-direction:row;/*表示横向排列*/
border: 5px solid blue;
width: 600px;
height: 300px;
}
/*
当子元素为横向排列时，flex、flew-grow、flex-shrink以及flex-basis样式属性均用来指定或者调整子元素的宽度
当子元素为纵向排列时，flex、flew-grow、flex-shrink以及flex-basis样式属性均用来指定或者调整子元素的高度
*/
#text-a{background-color: orange;}
/* flex:flex-grow样式属性值 flex-shrink样式属性值 flex-basis样式属性值
flex-basis样式属性值是项目的长度
当不指定flex-grow样式属性值和flex-shrink样式属性值时，默认样式属性值均为1，当不指定 flex-basis样式属性值时，默认样式属性值为0
*/
#text-b{background-color: yellow;flex:1 3 250px;}
#text-c{background-color: green;}
#text-a,#text-b,#text-c{
flex:250px;/*指定宽度为250像素*/
font-size: 1.5em;
font-weight: bold;
box-sizing: border-box;
}
style>
head>
<body>
<div id="container">
<div id="text-a">示例文字Adiv>
<div id="text-b">示例文字Bdiv>
<div id="text-c">示例文字Cdiv>
div>
body>
html>