css3如何利用flex
布局每行显示固定个数,下面编程教程网小编给大家介绍一下实现代码!
实现代码如下:
ul{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
li{
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 20%;
height: 70px;
font-size: 18px;
border-right: 1px solid #ddd;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
}
以上是编程学习网小编为您介绍的“flex布局每行显示固定个数”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
织梦狗教程
本文标题为:flex布局每行显示固定个数


基础教程推荐
猜你喜欢
- 前端19个冷知识代码 2024-12-08
- gps定位坐标获取的几种方式 2024-11-22
- vue 3.x 环境搭建及项目创建 2023-10-08
- CSS中px em rem区别与使用 2023-12-12
- 将字符串中由空格隔开的每个单词首字母大写 2024-03-09
- 如何以及何时使用sIFR 2022-10-16
- PHP HTML复选框仅提交MySQL问题的最后一个值 2023-10-26
- Vue中如何实现动态路由的示例代码 2023-07-10
- $.ajax()常用方法详解(推荐) 2023-01-20
- HTML iframe标签用法案例详解 2022-11-23