•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

CSS的flex怎样依据内容变动高度【html5教程】,CSS

摘要: flexbox是一个从CSS3增加的规划模块,特地用于列和规划,本篇文章就来给人人分享一下怎样运用CSS的flex依据内容变动高度。话不多说,我们直接进入正题~怎样依据flex的内容变动高...
flexbox是一个从CSS3增加的规划模块,特地用于列和规划,本篇文章就来给人人分享一下怎样运用CSS的flex依据内容变动高度。

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

怎样依据flex的内容变动高度

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

如图所示

有一个属性能够完成高度的变化,就是, align-items: baseline;要运用的部份是指定display:flex的父元素;

我们来看一个细致的例子

代码以下:

HTML

<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

.container{
  display: flex;
  background: #ccc;
  flex-wrap: wrap;
  align-items: baseline;
}
.box{
  width: 200px;
  margin: 10px;
  background-color: #66b6d5;
}

在浏览器上显现的结果以下:

本篇文章到这里就悉数完毕了,更多相干精彩内容人人能够关注ki4网的CSS3视频教程栏目来进一步的进修!!!

以上就是CSS的flex怎样依据内容变动高度的细致内容,更多请关注ki4网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号