flexbox属性速览及常见布局实现
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子父元素属性创建弹性盒子<style> .flex-container { display: flex; width: 300px; height: 200px; } </style> <div class="flex-container">我是一个弹性盒子</div> flex-direction设置子元素的排列方式属性对照:
<style> .flex-container { display: flex; flex-direction: row | row-reverse | column | column-reverse; width: 300px; height: 200px; } </style> <div class="flex-container">我是一个弹性盒子</div> justify-content设置子元素的水平对齐方式属性对照: <style> .flex-container { display: flex; flex-direction: row | row-reverse | column | column-reverse; justify-content: flex-start | flex-end | center | space-between | space-around width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } </style> <div class="flex-container"> <div class="flex-item">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item">item-3</div> </div> align-items 设置子元素的垂直对齐方式属性对照: <style> .flex-container { display: flex; flex-direction: row | row-reverse | column | column-reverse; align-items: flex-start | flex-end | center | baseline | stretch width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } </style> <div class="flex-container"> <div class="flex-item">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item">item-3</div> </div> flex-wrap 指定弹性盒子的子元素换行方式属性对照: <style> .flex-container { display: flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } </style> <div class="flex-container"> <div class="flex-item">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item">item-3</div> </div> align-content 设置flex-wrap属性下子元素的行对齐属性对照: <style> .flex-container { display: flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: wrap; align-content: center; width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } </style> <div class="flex-container"> <div class="flex-item">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item">item-3</div> </div> flex-flow 是flex-direction 和 flex-wrap 的简写<style> .flex-container { display: flex; flex-flow: row-reverse wrap; width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } </style> <div class="flex-container"> <div class="flex-item">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item">item-3</div> </div> 弹性盒子元素属性order 排序用整数值来定义排列顺序,数值小的排在前面。可以为负值 <style> .flex-container { display: flex; flex-flow: row-reverse wrap; width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } .first { order: -1; } </style> <div class="flex-container"> <div class="flex-item first">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item">item-3</div> </div> margin对齐设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全居中。 <style> .flex-container { display: flex; flex-flow: row-reverse wrap; width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } .first { order: -1; } .three { margin-right: auto; } <!--完美的居中--> .flex-item-1 { margin: auto; } </style> <div class="flex-container"> <div class="flex-item first">item-1</div> <div class="flex-item">item-2</div> <div class="flex-item three">item-3</div> </div> <!--完美的居中--> <div class="flex-container"> <div class="flex-item-1">完美的居中</div> </div> align-self 设置元素自身在X、Y轴上到对齐方式属性对照: <style> .flex-container { display: flex; flex-flow: row-reverse wrap; width: 300px; height: 200px; } .flex-item { width: 100px; height: 100px; background: #f66; } .item-1 { align-self: flex-start; } .item-2 { align-self: center; } .item-3 { align-self: flex-end; } </style> <div class="flex-container"> <div class="flex-item item-1">item-1</div> <div class="flex-item item-2">item-2</div> <div class="flex-item item-3">item-3</div> </div> flex 指定弹性子元素如何分配空间属性对照: <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; margin: 10px; } .item1 { -webkit-flex: 2; flex: 2; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; } </style> <div class="flex-container"> <div class="flex-item item1">flex item 1</div> <div class="flex-item item2">flex item 2</div> <div class="flex-item item3">flex item 3</div> </div> 弹性盒子响应式布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Flexbox 响应式布局</title> <style> * { margin: 0; padding: 0; } .flex-container { display: flex; flex-flow: row wrap; font-weight: bold; text-align: center; } .flex-container > * { padding: 10px; flex: 1 100%; } .flex-header { background: coral; } .flex-main { background: cornflowerblue; } .flex-footer { background: lightgreen; } .aside1 { background: moccasin; } .aside2 { background: violet; } @media all and (min-width: 600px) { .aside { flex: 1 auto; } } @media all and (min-width: 800px) { .flex-main { flex: 4 0px; } .aside1 { order: 1;} .flex-main { order: 2;} .aside2 { order: 3;} .flex-footer { order: 4; } } </style> </head> <body> <div class="flex-container"> <header class="flex-header">头部</header> <article class="flex-main"> <p>Lorem ipsum dolor sit,amet consectetur adipisicing elit. Aut atque id obcaecati quasi alias eveniet facere necessitatibus sit distinctio ipsa nihil officia architecto odit debitis natus maxime,perspiciatis maiores labore.</p> </article> <aside class="aside aside1">边栏1</aside> <aside class="aside aside2">边栏2</aside> <footer class="flex-footer">底部</footer> </div> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |