【CSS】flex的常用布局

1、垂直居中，写在父级上

div{display: flex;justify-content: center;align-items: center;
}

2、flex-左右两端，垂直居中

该布局在移动端较为常见

<style>
.wrap{display: flex;justify-content: space-between;align-items: center;width: 200px;height: 100px;border: 1px solid #000;
}
</style>
<div class="wrap"><p>左边文字</p><p>右边文字</p>
</div>

3、10个div分两行布局，（保持div原有的宽度）

<style>
.wrap{width: 300px;height: 500px;background: pink;
}
.nav{display: flex;flex-wrap: wrap; /*伸缩盒子的换行*/
}
.item{width: 20%;border: 1px solid #000;box-sizing: border-box;
}
</style><div class="wrap"><div class="nav"><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div><div class="item">菜单</div></div>
</div>

转载于:https://www.cnblogs.com/cindy2035/p/10436751.html

【CSS】flex的常用布局相关推荐

DIV+CSS网页设计常用布局代码
单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;wid ...
flex 引入css,Flex常用布局
Flex常用布局项目介绍 flex简单布局,导入css后直接使用使用说明 1. 以行布局 .rbox 使用方法: 1 2 3 结果: 2. 以列布局 .cbox 使用方法: 1 2 3 结果: 3 ...
html css学习笔记~ 基础知识和页面显示的四个区域内容及display:flex 等常用的一些命令（手画）
一般在html文件中输入<link href=".../xxx.css" rel="stylesheet"/> 通过这样的外部样式联系 css & ...
css垂直居中最常用的八种布局方法
css垂直居中最常用的八种布局方法首先定义两个盒子,然后进行下布局样式操作! 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center 块级元素设置其本身的l ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
css flex布局 padding,CSS3 flex布局之快速实现BorderLayout布局
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代 ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...

【CSS】flex的常用布局

【CSS】flex的常用布局相关推荐

最新文章

热门文章