HTML部分：
<div id="nav">
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFF</li>
</ul>
</div>
css部分：
#nav{
margin: 0 auto
border: 2px solid #00CED1
}
ul,li {
margin: 0px
padding: 0px
list-style: none
}
ul{
display: flex
flex-direction: row
flex-wrap: wrap
}
li{
border: 1px solid
width: 100px/*每个元素的初始化宽度*/
text-align: center
margin-top: 10px
margin-bottom: 10px
flex:auto /*这是关键*/
}
扩展资料：
Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
横向排列需要在CSS中设定一个浮点，属性名为float 设定为Left 或者 Right这两个有差别 如果是Left 它会往左开始 1 2 3 4 如果是 Right是 往右开始 4 3 2 1
代码可以这么写
ltstyle
.LinkUl { float:left}
lt/style
ltdiv
lth3ltb友情链接lt/blt/h3
ltul id=ul1 class=LinkUl
ltli这是第一列的第一个lt/li
ltli这是第一列的第二个lt/li
ltli这是第一列的第三个lt/li
lt/ul
ltul id=ul2 class=LinkUl
ltli这是第二列的第一个lt/li
ltli这是第二列的第二个lt/li
ltli这是第二列的第三个lt/li
lt/ul
ltul id=ul3 class=LinkUl
ltli这是第三列的第一个lt/li
ltli这是第三列的第二个lt/li
ltli这是第三列的第三个lt/li
lt/ul
lt/div
也可以适用于ltli标签
li标签元素横排，关键是float属性，比如下例，li往左浮动，不清除浮动即可。居中显示，把ul，li用一个盒子nav装起来，并设置 “text-align: center”属性即可，即内容居中。具体如下例所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#nav {
height: 30px
width: 100%
background-color: #c00
text-align: center
}
#nav ul {
margin: 0 0 0 30px
padding: 0px
font-size: 12px
color: #FFF
line-height: 30px
white-space: nowrap
}
#nav li {
list-style-type: none
display: inline
}
#nav li a {
text-decoration: none
font-family: Arial, Helvetica, sans-serif
padding: 7px 10px
color: #FFF
}
#nav li a:hover {
color: #ff0
background-color: #f00
}
</style>
</head><body>
<div id="nav">
<ul>
<li><a href=" http://www.52css.com/">HomePage</li></A>
<li><a href=" http://www.52css.com/">Div+CSS教程</a></li>
<li><a href=" http://www.52css.com/">CSS布局实例</a></li>
<li><a href=" http://www.52css.com/">CSS2.0教程 </a></li>
<li><a href=" http://www.52css.com/">CSS在线手册</a></li>
<li><a href=" http://www.52css.com/">Web标准</a></li>
<li><a href=" http://www.52css.com/">XHTML教程</a></li>
</ul>
</div></body>
</html>
