布局①—初探Flex布局

最新推荐文章于 2024-10-09 13:13:15 发布

Superstatus

最新推荐文章于 2024-10-09 13:13:15 发布

阅读量356

点赞数

分类专栏： Html 文章标签： html

本文链接：https://blog.csdn.net/Superstatus/article/details/80711049

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文第一次展现flex布局

学习关键词：display:flex , flex-basis:70%

先来看看效果

为什么要用flex布局？（以前不用布局的时候，就用float等等代替，但是像素可能会出现问题，为了解决肉眼看到问题就用flex）

首先看看这两篇：

Flex Basis与Width的区别

html+css:display:flex属性

好了，接下来看看代码（header，section，footer）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo_2test</title>
<style type="text/css">
  body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  body *{
    box-sizing: border-box;
  }
  /* 主要是这个 */
  @media (min-width: 550px) {
    /*
 this is to apply flexbox to header and section when the window width is more than 550px.
  */
  header{
    display: flex;
   
  }
  section{
    display: flex;
  }
}

 
  header{
    height: 45px;
    border-bottom: 1px solid #eee;

   }
 
  header h3{
    flex: 3;  
    margin-left: 30px;
    margin-top: 15px;
  }
  header ul{
    flex: 1;
  }
  header li {
    display: inline-block;
    margin-left: 15px;
    font-size: 0.9rem;
  }
  article{
    flex-basis: 70%;
    border: 1px solid #F8F8F8;
  }
  aside{
    flex-basis: 30%;
    background: #F8F8F8;
    padding: 10px;
  }

  footer {
  height: 200px;
  background: #888;
  color: #fff;
  text-align: center;
  padding-top: 20px;
}

  .article-wrapper{
    width: 90%;
      background: #eee;
     margin: 0 auto;
  }
  .home-label {
  border-bottom: 1px #333 solid;
   }
  .aside-label {
  width: 90%;
   }
   .home-label-title {
  display: inline-block;
  background: #333;
  color: #fff;
  margin-bottom: 0;
  padding: 8px 15px 3px 15px;
  border-radius: 5px 5px 0 0;
  font-weight: 200;
  font-size: 0.9rem;
}
.blog-list-home {
  display: flex;
   flex-direction: row; 
  border-bottom: solid 1px #B8B8B8;
}
.blog-thumbnail {
  flex-basis: 30%;
  background: #ccc;
  padding: 15px;
}
.thumbnail-frame {
  width: 130px;
  background: #eee;
  height: 80px;
  display: block;
}
.blog-list-content {
 /*  初始长度为 70% */
  flex-basis:  70%;
  background: #F0F0F0;
  line-height: 1.2rem;
  color: #303030;
  font-size: 0.9rem;
  padding: 8px;
}
.blog-list-content h4 {
  font-size: 1.2rem;
  margin: 10px 0;
}
.aside-content-home {
  padding: 10px;
  line-height: 1.2rem;
  color: #303030;
}
</style>
<body>
    <header>
      <h3 class="site-title">site title</h3>
      <ul>
        <li>Blog</li>
        <li>Work</li>
        <li>About</li>
      </ul>
    </header>
    <section>
      <article>
        <div class="article-wrapper">
             <div class="blog-label">
        <div class="home-label">
        <h4 class="home-label-title">BLOG</h4>
        </div>
        </div>
           <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        </div>
      </article>
      <aside>
           <div class="aside-about">
        <div class="home-label aside-label">
          <h4 class="home-label-title">ABOUT</h4>
        </div>
        <div class="aside-content-home">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nam neque non rem rerum ipsa in doloremque aspernatur eius iste, cupiditate repudiandae, quis laboriosam ipsam, architecto sed dolorem quos enim optio eveniet dignissimos aliquam temporibus? Laboriosam ipsa veritatis nemo ab.
        </div>
      </div>
      </aside>
    </section>
     <footer>
    footer
 </footer>
</body>
</html>