java窗口三栏布局_移动端的flex三栏布局的相关知识介绍（代码示例）

本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

默认情况下先显示移动端，通过 @media 属性适配屏幕变化

使用flexbox相关的CSS属性display: flex; (父元素)

flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出该如何显示)

flex: flex-grow flex-shrink flex-basis; (子元素, 子元素该如何分配空间)

order: number; (子元素, 子元素的顺序该如何排列)

重点在父元素上设置 display: flex 和 flex-wrap: wrap

通过 flex 来调整子元素上的空间分配(扩展、收缩比例和伸缩基准值)

通过 order 来调整子元素的显示顺序(把 .center 放在中间)

例子

CSS.box {

display: flex;

flex-wrap: wrap;

text-align: center;

}

.center {

background-color: #f00;

flex: 100% 1;

}

.left, .right {

flex: 100% 1;

}

.left {

background-color: #0f0;

}

.right {

background-color: #00f;

}

@media all and (min-width: 400px) {

.left, .right {

flex: 50% 1;

}

@media all and (min-width: 800px) {

.box {

flex-wrap: nowrap;

}

.center {

order: 2;

flex: 1;

}

.left, .right {

flex: 0 0 300px;

}

.left {

order: 1;

}

.right {

order: 3;

}

HTML

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

left

right

java窗口三栏布局_移动端的flex三栏布局的相关知识介绍（代码示例）相关推荐

移动端布局三种视口_移动端布局：视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
vueweb端响应式布局_移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
三级菜单页面布局_三级菜单的最快导航布局
三级菜单页面布局重点 (Top highlight) When users navigate an interface, there's a need for speed. The faster i ...
ios底部栏设计规范_设计干货：底部导航栏规范设计总结
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...
flexbox布局_使用Flexbox制作十二列布局
flexbox布局演示地址 If there's one thing flexbox excels at, it's twelve-column layouts. In a twelve-colum ...
ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
layout布局_安卓最常见的几种布局
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件帧布局(FrameLayout):组件从屏幕左上方布局组件表格布局(TableL ...
从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局，极其重要)
html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性提示博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型 ...

java窗口三栏布局_移动端的flex三栏布局的相关知识介绍（代码示例）

java窗口三栏布局_移动端的flex三栏布局的相关知识介绍（代码示例）相关推荐

最新文章

热门文章