几个CSS3的flex弹性盒模型布局的简单例子演示

时间：2021-05-08

Flexible Box(弹性盒子)能让页面的分布更合理和方便，
这是之前使用常规的布局方式所做不到的。

XML/HTML Code复制内容到剪贴板
  • <divclass="warp">
  • <divclass="modular">1</div>
  • <divclass="modular">2</div>
  • <divclass="modular">3</div>
  • <divclass="modular">4</div>
  • </div>

    • display:flex和display:box有什么区别？

    前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

    CSS Code复制内容到剪贴板
  • .warp{
  • width:100%;
  • height:100px;
  • display:-webkit-box;
  • display:-moz-box;
  • display:-webkit-flex;
  • display:-moz-flex;
  • display:-ms-flexbox;
  • display:flex;
  • -webkit-box-pack:justify;
  • -webkit-box-align:ustify;
  • -moz-box-pack:justify;
  • -moz-box-align:justify;
  • box-pack:justify;
  • box-align:justify;
  • flex-direction:row;
  • -webkit-flex-direction:row;
  • flex-wrap:nowrap;
  • flex-flow:rownowrap;
  • justify-content:center;
  • align-items:center;
  • align-content:center;
  • }
  • .warp.modular{
  • width:80px;
  • height:80px;
  • background-color:#eee;
  • text-align:center;
  • order:-1;
  • flex-grow:1;
  • flex-shrink:2;
  • flex-basis:auto;
  • flex:12100px;
  • align-self:center;
  • }

    • 直接上代码，写了个Demo便于理解,其中warp为父元素，称为“伸缩容器，modular为子元素，称为“伸缩项目”。

    1) Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

    2) 目前没有浏览器支持 box-flex 属性，Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

    3) CSS的columns在伸缩容器上没有效果。

    4) float、clear和vertical-align在伸缩项目上没有效果。

    例：移动端导航（居中，左右，自适应居中，自适应竖向排列）

    CSS Code复制内容到剪贴板
  • <styletype="text/css">
  • .nav{
  • background:#00BFFF;
  • display:-webkit-box;
  • display:-moz-box;
  • display:-ms-flexbox;
  • display:-webkit-flex;
  • display:flex;
  • -webkit-flex-flow:rowwrap;
  • -webkit-flex-flow:columnwrap;
  • justify-content:flex-start;
  • justify-content:flex-end;
  • }
  • .nava{
  • text-decoration:none;
  • display:block;
  • padding:1em;
  • color:#fff;
  • flex:1;
  • }
  • @mediaalland(max-width:800px){
  • .nav{
  • justify-content:space-around;
  • }
  • }
  • </style>
    • XML/HTML Code复制内容到剪贴板
  • <ulclass="nav">
  • <li><ahref="#">1</a></li>
  • <li><ahref="#">2</a></li>
  • <li><ahref="#">3</a></li>
  • <li><ahref="#">4</a></li>
  • </ul>

    • 例：移动端常用自适应布局

    CSS Code复制内容到剪贴板
  • <styletype="text/css">
  • .wrapper{
  • display:-webkit-box;
  • display:-moz-box;
  • display:-ms-flexbox;
  • display:-webkit-flex;
  • display:flex;
  • -webkit-flex-flow:rowwrap;
  • flex-flow:rowwrap;
  • }
  • .wrapper>*{
  • padding:10px;
  • flex:1100%;
  • }
  • .header{
  • background:#FF6347;
  • }
  • .footer{
  • background:#90EE90;
  • }
  • .main{
  • background:#00BFFF;
  • }
  • .aside-1{
  • background:#FFD700;
  • }
  • .aside-2{
  • background:#FF69B4;
  • }
  • @mediaalland(min-width:600px){
  • .aside{
  • flex:1auto;
  • }
  • }
  • @mediaalland(min-width:800px){
  • .main{
  • flex:30px;
  • }
  • .aside-1{
  • order:1;
  • }
  • .main{
  • order:2;
  • }
  • .aside-2{
  • order:3;
  • }
  • .footer{
  • order:4;
  • }
  • }
  • </style>
    • XML/HTML Code复制内容到剪贴板
  • <divclass="wrapper">
  • <headerclass="header">顶部</header>
  • <articleclass="main">
  • <p>我在中间显示的文字</p>
  • </article>
  • <asideclass="asideaside-1">我在左边显示的文字</aside>
  • <asideclass="asideaside-2">我在右边显示的文字</aside>
  • <footerclass="footer">底部</footer>
  • </div>

    • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章