C语言学习网

使用flex有哪些布局

发表于:2022-12-07 作者:安全数据网编辑
编辑最后更新 2022年12月07日,使用flex有哪些布局?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。flex布局StickyFooter经典的上-中-下

使用flex有哪些布局?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

flex布局StickyFooter

  经典的上-中-下布局。

  当页面内容高度小于可视区域高度时,footer吸附在底部;当页面内容高度大于可视区域高度时,footer被撑开排在content下方

  demolink

  demo1-StickyFooter

  

  

HEADER

  

CONTENT

  

FOOTER

  

  body{

  min-height:100vh;

  display:flex;

  flex-direction:column;

  }

  article{

  flex:auto;

  }

  flex布局Fixed-WidthSidebar

  在上-中-下布局的基础上,加了左侧定宽sidebar。

  demolink

  demo2-Fixed-WidthSidebar

  

  

HEADER

  

  

  

CONTENT

  

  

FOOTER

  

  body{

  min-height:100vh;

  display:flex;

  flex-direction:column;

  }

  .content{

  flex:auto;

  display:flex;

  }

  .contentarticle{

  flex:auto;

  }

  flex布局Sidebar

  左边是定宽sidebar,右边是上-中-下布局。

  demolink

  demo3

  

  

  

  

HEADER

  

CONTENT

  

FOOTER

  

  

  body{

  min-height:100vh;

  display:flex;

  }

  aside{

  flex:none;

  }

  .content{

  flex:auto;

  display:flex;

  flex-direction:column;

  }

  .contentarticle{

  flex:auto;

  }

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。

0