CSS行高调整为自动（high：auto）有什么用，一般什么时候用呢？

html-css026

CSS行高调整为自动（high：auto）有什么用，一般什么时候用呢？,第1张

比如说我要做一个新闻列表的页面，新闻多的时候一页显示20行，高度要达到200px+。新闻少的时候比如只有一条新闻，如果还是自动高度就很难看了，就要定义一个最小高度比如50px。那这个时候我只要定义min-height: 50pxhight: auto就可以了。

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

两种情况:

列宽不固定:

不用设置隐藏, 设置table或table的父标签宽度, 因为会自适应宽度, 只要规定个高就可以了

table tr{

  height:      30px      /*把table标签的行高设定为固定值*/

}

2.   列宽固定:

  设置隐藏, 如果要设置table或table的父标签宽度, 因超过不会自适应宽度, 每行会折行而破坏宽度, 所以要设置隐藏

table tr{

  height:      30px      /*把table标签的行高设定为固定值, 高度根据自己需求设定*/

overflow:   hidden /*超过隐藏*/

}