CSS一篇文章搞懂系列10:flex弹性盒,更高效的布局方式

一:CSS 的flex 弹性盒:

   CSS3中提出的新的布局的工具,设置浮动,脱离文档流之后的布局会出现很多预想不
   到的问题。需要更强大、更简单高效的布局方法。
   
   flex是新提出的方法,可能对一些老版本PC的浏览器不兼容,但是对于移动端是非常
   适用的,并且也是未来网页布局的发展方向。




<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
      .box1{
      
    
       display:flex;
       justify-content:space-around;
       flex-wrap: wrap;
       align-items: baseline;
       
      }
      .box2{
      
        
        background-color:crimson;
        width: 200px;
        height: 200px;

      }

      .box3{
      
        
        background-color:yellow;
        width: 200px;
        height: 200px;

      }
      .box4{
      
       
        background-color:green;
        width: 200px;
        height: 200px;

      }

      @media all and (min-width:500px) and (max-width:800px){
      
       .box1{
      
        background-color:pink;
       }
        
      }

    style>
head>
<body>
    <div class="box1">
      <div class="box2">1 div>
      <div class="box3">2div>
      <div class="box4">3div>
    div>
body>
html>

你可能感兴趣的:(前端学习)