提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS的flex怎样依据内容变动高度【html5教程】,CSS

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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS的flex怎样依据内容变动高度【html5教程】,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线