CSS的flex怎么根据内容更改高度


本文摘自PHP中文网,作者不言,侵删。

CSS flex根据内容更改高度的实现方法:首先创建一个HTML示例文件;然后创建一些div以及文字内容;最后通过“align-items:baseline;”属性实现高度的变化即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

flexbox是一个从CSS3添加的布局模块,专门用于列和布局,本篇文章就来给大家分享一下如何使用CSS的flex根据内容更改高度。

话不多说,我们直接进入正题~

如何根据flex的内容更改高度

flexbox的一个默认特性是为每列都设置一个高度。

如图所示

2345截图20181124115117.png

有一个属性可以实现高度的变化,就是, align-items: baseline;要应用的部分是指定display:flex的父元素;

我们来看一个具体的例子

代码如下:

HTML

1

2

3

4

5

6

7

<div class="container">

  <div class="box"><p>文字内容</p></div>

  <div class="box"><p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字</p></div>

  <div class="box"><p>文字内容</p></div>

  <div class="box"><p>文字内容</p></div>

  <div class="box"><p>文字内容</p></div>

</div>

CSS

阅读剩余部分

相关阅读 >>

css实现等高布局的三种方式(代码示例)

css如何修改默认滚动条样式

css有哪几种选择器

css怎么设置div大小

css怎么做个红色的心

html中css代码放哪里

css hr是什么意思

css的选择符有哪些

css怎么设置table样式

css为什么压缩

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...