CSS3之 flex 各种场景应用

最近刚入职一个新公司，全新负责搭建一个项目。CSS3 Layout 的应用那是应接不暇。

不能说CSS3 没有用过，一般都是用到哪里查到哪里。

没有系统的思考过。

今天我还是江几个布局为主吧。

第一种布局 列布局。

例如这是百度首页的热搜记录：

如果用flex改如何做呢？

<!-- 文章图一 -->
<div class="warp">
  <div>物流不通不畅问题总体得到缓解</div>
  <div>上海社会面疫情风险正逐步降低热</div>
  <div>北京56例感染者详情一览</div>
  <div> 人涉婚宴热4上海外滩长草？</div>
  <div> 记者连夜去看了新2她是全国唯</div>
  <div> 记者连夜去看了新</div>
  <div> 她是全国唯一一位女省委书记热</div>
  <div> 记者连夜去看了新</div>
  <div>同济大学回应学生盒饭吃出虫卵异物</div>
  <div>3333</div>
</div>



.warp {
  display: flex;
  width:300px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    max-width: 50%;
    line-height: 25px;
    height:25px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
  }
} 

这里面重点的几句代码要解释下：

flex-direction: row; // 多列布局 ， 默认缺省属性就是row 

如果设置为colum , 那就只能一列了。这个侧边栏用的比较的多。

flex-wrap: wrap; // 这个属性决定你是否多行布局是否成功，默认flex-wrap 为 no-wrap; 

如果没有设置属性就是这个