【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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java.util.Properties

ava.util.Properties是对properties这类配置文件的映射。支持key-value类型和xml类型两种 首先&#xff0c;新建一个文件&#xff0c;如图&#xff1a; 然后再Java代码段输入如下代码&#xff1a; import java.io.FileInputStream; import java.io.InputStream; import java…

Spring-boot 打成jar包后使用外部配置文件

官网说明 第一种是在jar包的同一目录下建一个config文件夹&#xff0c;然后把配置文件放到这个文件夹下&#xff1b; 第二种是直接把配置文件放到jar包的同级目录&#xff1b; 第三种在classpath下建一个config文件夹&#xff0c;然后把配置文件放进去&#xff1b; 第四种是在c…

UI自动化之元素定位(xpath、css)

很早之前就已经写过自动化了&#xff0c;不过点着功能久了就会容易忘记元素定位&#xff0c;尤其是xpath和css定位&#xff0c;所以就花点时间做下总结收集。 xpath有两种定位&#xff1a; 一.绝对路径&#xff08;不推荐使用&#xff0c;除非已经使用了所有方式仍然无法定位&a…

属性编辑器PropertyEditor

在Spring配置文件里&#xff0c;我们往往通过字面值为Bean各种类型的属性提供设置值&#xff1a;不管是double类型还是int类型&#xff0c;在配置文件中都对应字符串类型的字面值。BeanWrapper填充Bean属性时如何将这个字面值转换为对应的double或int等内部类型呢&#xff1f;我…

Linux下查看当前文件大小的命令

1、ls -lht 列出每个文件的大小和当前目录所有文件大小总和 2、du -sh * 列出当前文件夹下的所有子文件的大小 看你需要啥样的&#xff0c;自己来吧 转载于:https://www.cnblogs.com/xbxxf/p/9619818.html

Spring IOC-BeanFactory的继承体系结构

本文主要介绍BeanFactory以及它的各种继承层级的接口、抽象类及实现类&#xff0c;因为内容很多&#xff0c;所以这里不介绍ApplicationContext继承体系下的类&#xff08;虽然ApplicationContext本质上也是BeanFactory&#xff0c;但是毕竟这这是我们平时接触最多的两种类别&a…

【PHP】xampp配置多个监听端口和不同的网站目录(转)

转自&#xff1a;https://blog.csdn.net/cc1314_/article/details/75646344 windows下使用xampp配置多个监听端口和不同的网站目录 一&#xff1a;配置Apache文件httpd.conf打开Apache的配置文件httpd.conf&#xff0c;可以通过点击xampp的Apache的config下的Apache(httpd.conf…

Java消息中间件

1.概述 中间件 非底层操作系统软件&#xff0c;非业务应用软件&#xff0c;不是直接给最终用户使用的&#xff0c;不能直接给客户带来价值的软件统称为中间件。 消息中间件 管制关注于数据的发送和接收&#xff0c;利用高效可靠的异步消息传递机制集成分布式系统。 优点 ① 解…

form 源码刨析

def clean_name(self) value self.cleaned_data.get(name) if "金-瓶-梅" not in value: raise ValidationError("不符合要求") return value 重写clean方法 转载于:https://www.cnblogs.com/wuheng-123/p/9623289.html

Activemq源码、编译、导入idea、源码调试总结

1、在本地下载源码 在GitHub官网搜activemq&#xff0c;找到排名第一的&#xff0c;并打开&#xff0c;如图所示&#xff0c;拷贝url地址。 activemq托管地址&#xff1a;https://github.com/apache/activemq.git 切换到git bash下&#xff0c;输入命令&#xff1a; mkdir a…

activiti 视图

1. application.properties增加如下配置 spring.activiti.database-schema-updatefalsespring.activiti.db-history-usedfalsespring.activiti.db-identity-usedfalse 2. 视图sql -- 修改表名称 ALTER TABLE act_id_user RENAME act_id_user_bak1; ALTER TABLE act_id_group RE…

ActiveMQ源码解析 建立连接

作为一个消息中间件&#xff0c;有客户端和服务端两部分代码&#xff0c;这次的源码解析系列主要从客户端的代码入手&#xff0c;分成建立连接、消息发送、消息消费三个部分。趁着我昨天弄明白了源码编译的兴奋劲头还没过去&#xff0c;今天研究一下建立连接的部分。 如果读起…

原生Js_实现广告弹窗

广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>Gary图片轮播</title><style type"text/css">#ad{width:300px;height: 300px;background-color:antiquewhite…

springcloud注册中心eureka

1、前提 springcloud的注册中心是以springboot为基础搭建起来的。 开发工具&#xff1a;IDEA 项目管理工具&#xff1a;maven 2、搭建步骤 创建一个web项目&#xff08;建议使用IDEA工具构建项目&#xff09;修改pom文件 <dependency><groupId>org.springframework…

Nancy in .Net Core学习笔记 - 视图引擎

前文中我们介绍了Nancy中的路由&#xff0c;这一篇我们来介绍一下Nancy中的视图引擎。 Nancy中如何返回一个视图(View) 在ASP.NET Mvc中&#xff0c;我们使用ViewResult类来返回一个视图。Nancy中也提供了类似的功能, 在NancyModule类中&#xff0c;Nancy提供了一个ViewRendere…

设计模式之组合模式(Composite 模式)

引入composite模式 在计算机文件系统中&#xff0c;有文件夹的概念&#xff0c;文件夹里面既可以放入文件也可以放入文件夹&#xff0c;但是文件中却不能放入任何东西。文件夹和文件构成了一种递归结构和容器结构。 虽然文件夹和文件是不同的对象&#xff0c;但是他们都可以被放…

HierarchicalBeanFactory接口

HierarchicalBeanFactory 提供父容器的访问功能.至于父容器的设置,需要找ConfigurableBeanFactory的setParentBeanFactory(接口把设置跟获取给拆开了!). HierarchicalBeanFactory源码具体&#xff1a; 1、第一个方法返回本Bean工厂的父工厂。这个方法实现了工厂的分层。 2、第…

C++: C++函数声明的时候后面加const

C: C函数声明的时候后面加const 转自&#xff1a;http://blog.csdn.net/zhangss415/article/details/7998123 非静态成员函数后面加const&#xff08;加到非成员函数或静态成员后面会产生编译错误&#xff09;&#xff0c;表示成员函数隐含传入的this指针为const指针&#xff0…

【计蒜客习题】消除字符串

问题描述 蒜头君喜欢中心对称的字符串&#xff0c;即回文字符串。现在蒜头君手里有一个字符串 SS&#xff0c;蒜头君每次都会进行这样的操作&#xff1a;从 SS 中挑选一个回文的子序列&#xff0c;将其从字符串 SS 中去除&#xff0c;剩下的字符重组成新的字符串 SS。 蒜头君想…

Training a classifier

你已经学习了如何定义神经网络&#xff0c;计算损失和执行网络权重的更新。 现在你或许在思考。 What about data? 通常当你需要处理图像&#xff0c;文本&#xff0c;音频&#xff0c;视频数据&#xff0c;你能够使用标准的python包将数据加载进numpy数组。之后你能够转换这些…