弹性盒模型

标签: 笔记  css  html  flex

flex属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 技术点的解释:
			
			1、设置display: flex属性可以把块级元素在一排显示。
			
			2、flex需要添加在父元素上,改变子元素的排列顺序。
			
			3、默认为从左往右依次排列,且和父元素左边没有间隙。 */
			.box{
				height:400px;
				background:skyblue;
				display:flex;
			}
			.box1{
				width: 200px;
				height: 200px;
				background: red;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: orange;
			}
			.box3{
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

上面的代码:

三个块元素设置大小以及背景色,在父容器中添加flex。

技术点的解释:

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上,改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

使用justify-content属性设置横轴排列方式

本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解,属性值分别为:

justify-content: flex-start | flex-end | center | space-between |
space-around;

flex-start:交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

在这里插入图片描述
flex-end:右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

在这里插入图片描述
center: 居中

.box {
        background: blue;
        display: flex;
        justify-content: center;
    }

在这里插入图片描述
space-between:两端对齐,项目之间的间隔都相等。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

在这里插入图片描述
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style type="text/css">
    .box {
        background: blue;
        display:flex;
        justify-content:space-around;
    }

    .box div {

        width: 200px;
        height: 200px;
    }

    .box1 {
        background: red;
    }

    .box2 {
        background: orange;
    }

    .box3 {
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

使用align-items属性设置纵轴排列方式

本属性定义了项目在交叉轴上的对齐方式。属性值分别为:

align-items: flex-start | flex-end | center | baseline | stretch;

结合右侧编辑器中的布局以及下面的样式设置进行理解:
flex-start:默认值,左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

在这里插入图片描述
flex-end:交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

在这里插入图片描述
center: 交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

在这里插入图片描述
baseline:项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小,可以参考右侧编辑器中的代码进行测试。

在这里插入图片描述
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不设置高度,元素在垂直方向上铺满父容器*/
        width: 200px;
    }

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style type="text/css">
    .box {
		height: 500px;
        background: blue;
        display:flex;
        align-items: flex-end;
    }

    .box div {

        width: 200px;
        height: 200px;
    }

    .box1 {
        background: red;
    }

    .box2 {
		font-size: 20px;
        background: orange;
    }

    .box3 {
		font-size: 30px;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">123</div>
        <div class="box2">123</div>
        <div class="box3">123</div>
    </div>
</body>
</html>

给子元素设置flex占比

技术点的解释:

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex占比</title>
    <style type="text/css">
    .box {
        height: 300px;
        background: blue;
        display: flex;
    }

    .box div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        flex: 1;
        background: red;
    }

    .box2 {
        flex: 1;
        background: orange;
    }

    .box3 {
        flex: 1;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">flex:1</div>
        <div class="box2">flex:3</div>
        <div class="box3">flex:2</div>
    </div>
</body>

</html>
版权声明:本文为ENDEAVOR__原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ENDEAVOR__/article/details/108726254

智能推荐

Intellij IDEA 搭建Spring Boot项目(一)

Intellij IDEA 搭建Spring Boot项目 标签(空格分隔): SpringBoot JAVA后台 第一步 选择File –> New –> Project –>Spring Initialer –> 点击Next  第二步 自己修改 Group 和 Artif...

CentOS学习之路1-wget下载安装配置

参考1: https://blog.csdn.net/zhaoyanjun6/article/details/79108129 参考2: http://www.souvc.com/?p=1569 CentOS学习之路1-wget下载安装配置 1.wget的安装与基本使用 安装wget yum 安装软件 默认安装保存在/var/cache/yum ,用于所有用户使用。 帮助命令 基本用法 例子:下载...

深入浅出Spring的IOC容器,对Spring的IOC容器源码进行深入理解

文章目录 DispatcherServlet整体继承图 入口:DispatcherServlet.init() HttpServletBean.init() FrameworkServlet.initServletBean() 首先大家,去看Spring的源码入口,第一个就是DispatcherServlet DispatcherServlet整体继承图 入口:DispatcherServlet....

laravel框架的课堂知识点概总

1. MVC 1.1 概念理解 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑 MVC 是一种使用 MVC(Model View Controller ...

Unity人物角色动画系统学习总结

使用动画系统控制人物行走、转向、翻墙、滑行、拾取木头 混合树用来混合多个动画 MatchTarget用来匹配翻墙贴合墙上的某一点,人物以此为支点翻墙跳跃 IK动画类似于MatchTarget,控制两只手上的两个点来指定手的旋转和位置,使得拾取木头时更逼真 创建AnimatorController: 首先创建一个混合树,然后双击 可以看到该混合树有五种状态机,分别是Idle、WalkForward、...

猜你喜欢

Composer 安装 ThinkPHP6 问题

Composer 安装 ThinkPHP6 问题 先说说问题 一.运行环境要求 二.配置 参考: ThinkPHP6.0完全开发手册 先说说问题 执行ThinkPHP6的安装命令 遇到问题汇总如下: 看提示是要更新版本,执行命令更新。 更新之后,再次安装ThinkPHP,之后遇到如下问题。 尝试了很多方法,依然不能解决。其中包括使用https://packagist.phpcomposer.com...

Spring Boot 整合JDBC

今天主要讲解一下SpringBoot如何整合JDBC,没啥理论好说的,直接上代码,看项目整体结构 看一下对应的pom.xml 定义User.java 定义数据源配置,这里使用druid,所以需要写一个配置类 上面指定druid的属性配置,和用户登录的账号信息以及对应的过滤规则: 下面定义数据访问接口和对应的实现: 数据访问层很简单,直接注入JdbcTemplate模板即可,下面再看对应的servi...

html鼠标悬停显示样式

1.显示小手:     在style中添加cursor:pointer 实现鼠标悬停变成小手样式     实例:         其他参数: cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | tex...

Yupoo(又拍网)的系统架构

Yupoo!(又拍网) 是目前国内最大的图片服务提供商,整个网站构建于大量的开源软件之上。以下为其使用到的开源软件信息: 操作系统:CentOS、MacOSX、Ubuntu 服务器:Apache、Nginx、Squid 数据库:MySQLmochiweb、MySQLdb 服务器监控:Cacti、Nagios、 开发语言:PHP、Python、Erlang、Java、Lua 分布式计算:Hadoop...

创建一个Servlet项目流程(入门)

版本 IDEA 2020.2 JDK1.8 apache-tomcat-9.0.36 项目流程 一、IDEA中新建JaveEE项目 项目起名,选择项目存放地址,点击finish创建成功 进入项目后,右键选择项目,选择add Framework Support 选择Web Application,点击OK 此时项目文件夹 在WEB-INF下创建两个目录classes和lib 按ctrl+alt+sh...