可以使用 CSS 中的 flex 属性来设置 flexbox 的宽度. flex 属性是 flex-grow,flex-shrink 和 flex-basis 属性的组合, 用于设置 flexbox 的长度. flex 属性的性能非常灵敏, 移动友好; 很容易定位子元素和主容器.
页边距不会随内容页边距而塌陷. 任何元素的顺序都可以在不编辑 html 部分的情况下轻松更改. 但很少有时候我们有一个不相等的元素宽度, 那么你可以在 CSS 部分设计整个东西.
语法:
flex: number;
注意: 在这种情况下, 元素宽度取决于窗口的其他元素和屏幕.
示例 1: 使用 CSS 设置两种类型的宽度 flexbox
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- div.flexcontainer { display: flex; min-height: 200px; font-size: 15px;
- } div.columns { flex: 1; padding: 10px; } div.columns:nth-of-type(even)
- { flex: 2; } div.columns:nth-of-type(odd) { background: #85929E; color:
- white; } div.columns:nth-of-type(even) { background: #A5DDEF; color: green;
- }
- </style>
- </head>
- <body>
- <center>
- <div class="flexcontainer">
- <div class="columns">
- 这是第一列
- </div>
- <div class="columns">
- 这是第二列
- </div>
- <div class="columns">
- 这是第三列
- </div>
- <div class="columns">
- 这是第四列
- </div>
- </div>
- </body>
- </HTML>
效果图:
示例 2: 设置 4 种宽度类型的 flexbox
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- div.flexcontainer{ display: flex; min-height: 200px; font-size:15px; border:2px
- solid orange; } div.columns{ padding: 10px; color:white; } div.columns:nth-of-type(1){
- flex: 0.5; background: #1B2631; } div.columns:nth-of-type(2){ flex: 1;
- background:#424949; } div.columns:nth-of-type(3){ flex: 2; background:#4D5656;
- } div.columns:nth-of-type(4){ flex: 3; background:#626567; } th, td{ border:1px
- solid white; }
- </style>
- </head>
- <body>
- <center>
- <div class="flexcontainer">
- <div class="columns">
- 这是第一列
- </div>
- <div class="columns">
- 这是第二列
- </div>
- <div class="columns">
- 这是第三列
- </div>
- <div class="columns">
- 这是第四列
- </div>
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10489.html