CSS的flexbox如何使用

　　将Flexbox设置为父元素，这是非常重要的一个点。首先输入要应用的项目的父元素，如下所示。

　　display:flex;

　　要应用于内联元素，请输入以下内容。

　　display：inline-flex;

　　写入这个的元素将自动成为“Flex容器”，其子元素将为“Flexbox”，这样就使Flexbox属性可用。我们来写一些典型的属性。

　　flex-direction的使用

　　flex-direction是可以指定内容的排列方式的属性。

　　我们来创建以下的HTML和CSS，更改CSS中flex-direction的值

　　HTML代码

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<linkrel="stylesheet"type="text/css"href="style.css">

　　</head>

　　<body>

　　<divclass="menu">

　　<divclass="item">

　　</div>

　　<divclass="item">

　　</div>

　　<divclass="item">

　　</div>

　　<divclass="item">

　　</div>

　　<divclass="item">

　　</div>

　　</body>

　　</html>

　　CSS代码

　　style.css

　　.menu{

　　display:flex;

　　flex-direction:row;

　　}

　　.item{

　　text-align:center;

　　width:50px;

　　height:20px;

　　padding:3%;

　　margin:3%;

　　background-color:#c97796;

　　color:white;

　　}

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c54391.shtml