欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  首先我们来看一下min-width属性的语法格式:
 
  min-width:(宽度尺寸)
 
  宽度的尺寸可以使用CSS的尺寸规范指定。
 
  我们来看一个具体的例子
 
  代码示例:
 
  编写以下代码
 
  CSS代码:
 
  flex-column-min-width.css
 
  
 
  .container{
 
  display:flex;
 
  }
 
  .frameLeft{
 
  border:1pxsolid#e9006b;
 
  background-color:#fddceb;
 
  min-width:160px;
 
  flex:1;
 
  }
 
  .frameCenter{
 
  border:1pxsolid#0158c2;
 
  background-color:#ccdff6;
 
  min-width:320px;
 
  flex:3;
 
  }
 
  .frameRight{
 
  border:1pxsolid#d44100;
 
  background-color:#ffe4af;
 
  min-width:160px;
 
  flex:1;
 
  }
 
  HTML代码:
 
  flex-column-min-width.html
 
  <!DOCTYPEhtml><html><head>
 
  <metacharset="utf-8"/>
 
  <title></title>
 
  <linkrel="stylesheet"href="flex-column-min-width.css"/>
 
  </head>
 
  <body>
 
  <divclass="container">
 
  <divclass="frameLeft">左边的内容文字<br/>内容内容<br/>内容内容</div>
 
  <divclass="frameCenter">中间的内容文字<br/>内容内容<br/></div>
 
  <divclass="frameRight">右边的内容文字<br/>内容内容<br/>内容内容</div>
 
  </div>
 
  </body>
 
  </html>

2345截图20181129111305.png
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c54410.shtml