巧用flex实现页面布局分隔

作者: AMONTOP | 来源:发表于2019-08-13 17:13 被阅读0次

巧用flex实现页面布局分隔
css notebook
flex布局
Flex布局
React Native 之 flexbox布局
如何制作响应式风格-知识点回顾
前端布局-flex
前端页面中几种常用的flex布局
css中常见的布局方式
css垂直水平居中、flex布局

image.png

.all-box{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-box{
  height: 800rpx;
  width: 504rpx;
  display: flex;
  flex-direction: column;
}
.bottom-box{
  width: 100%;
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

① 设置 flex:1 为将整个all-box中给top-box的高度后将剩下的高度给bottom-box
② 如果top-box与bottom-box同时设置为 flex:1，则平分高度
③ 如果top-box设置为 flex:1， bottom-box设置为 flex:2 ，则表示总共有三份，top-box占一份，bottom-box占两份

巧用flex实现页面布局分隔
① 设置 flex:1 为将整个all-box中给top-box的高度后将剩下的高度给bottom-box② ...
css notebook
使用flex实现页面居中 Flex 布局教程：语法篇学习CSSflexbox
flex布局
flex布局网页布局（layout）是 CSS 的一个重点应用。Flex 布局，可以简便、完整、响应式地实现各种页面布局
Flex布局
什么是flex布局 2009年，W3C提出了Flex布局，它可以更简便，完整，响应式地实现各种页面的布局。Flex...
React Native 之 flexbox布局
flexbox布局是w3c继css之后的新的布局方式，可以简便、完整、响应式地实现各种页面布局。Flex是Flex...
如何制作响应式风格-知识点回顾
1：如何进行页面布局？弹性盒子： display:flex 可以实现垂直，水平居中、垂直反序 flex-dir...
前端布局-flex
1. 简介 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。flex...
前端页面中几种常用的flex布局
以下是前端开发中，常见的几种页面布局，使用flex实现 1.布局一 2.布局2 3.布局3
css中常见的布局方式
三栏布局三栏布局是页面中比较常见的布局方式，也有好几种实现方式，分别是flex布局，grid布局，float布局...
css垂直水平居中、flex布局
想要实现页面中垂直水平居中：使用flex布局： flex-direction属性决定主轴的方向（即项目的排列方向...