15、弹性盒和媒体查询
2019-03-04 本文已影响0人
calvinbj
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{border: 1px #f00 solid; display: inline-flex;}
section{width: 50px; height: 50px; border: 1px #00f solid; text-align: center; line-height: 50px;}
</style>
</head>
<body>
<div class="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{border: 1px #f00 solid; display: flex; flex-direction: row-reverse;}
section{width: 50px; height: 50px; border: 1px #00f solid; text-align: center; line-height: 50px;}
</style>
</head>
<body>
<div class="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{border: 1px #f00 solid; display: flex; width: 180px; flex-wrap: nowrap;}
section{width: 50px; height: 50px; border: 1px #00f solid; text-align: center; line-height: 50px; }
</style>
</head>
<body>
<div class="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
下面是justify-content：flex-end例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{border: 1px #f00 solid; display: flex; justify-content: flex-end;}
section{width: 50px; height: 50px; border: 1px #00f solid; text-align: center; line-height: 50px; }
</style>
</head>
<body>
<div class="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{border: 1px #f00 solid; overflow: hidden; width: 262px;}
section{width: 50px; height: 50px; border: 1px #00f solid; text-align: center; line-height: 50px; float: left; margin-right: 18PX;}
section:last-child {margin-right: 0;}
</style>
</head>
<body>
<div class="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{border: 1px #f00 solid; overflow: hidden; width: 262px; display: flex; justify-content: space-between;}
section{width: 50px; height: 50px; border: 1px #00f solid; text-align: center; line-height: 50px; float: left; margin-right: 18PX;}
</style>
</head>
<body>
<div class="box">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
</body>
</html>
