关于flex布局的一些简单用法

效果(下图)

实现代码:

<!--html-->
<div class="wrap">
<div class="content">这是子盒子</div>
</div> //css
.wrap {
display: flex;
width: 300px;
height: 300px;
background-color: #ccc;
justify-content: center;//子盒子位于现在的位置
//justify-content: flex-start;子盒子位于现在的位置 的左边
//justify-content: flex-end;子盒子位于现在的位置 的右边
}
.content {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
}

效果(如下图)

<!--html-->
<div class="wrap">
<div class="content">这是子盒子</div>
</div> //css
.wrap {
display: flex;
width: 300px;
height: 300px;
background-color: #ccc;
}
.content {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
align-self: center;//位于上图中现在的位置
//align-self: flex-start;位于上图中现在的位置 的上方
//align-self: flex-end;位于上图中现在的位置 的下方
}
//用于父元素
justify-content: center | flex-start | flex-end;// 中 左 右 三个位置 //用于子元素
align-self: center | flex-start | flex-end;// 中 上 下 三个位置 //两个属性相互结合,就可以做到很多布局

转化成flex的元素的子元素默认是排在一行的

flex-wrap:wrap(换行-在下方)| nowrap(换行-在上方)| none (默认-不换行)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*css*/
.wrap{
width:600px;
height:300px;
display:flex;
background-color: #ccc;
}
.wrap div{
width:25%;
height: 150px;
box-sizing: border-box;
line-height: 150px;
text-align: center;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

上面代码的效果图(默认不换行):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*css*/
.wrap{
width:600px;
height:300px;
display:flex;
background-color: #ccc;
flex-wrap: wrap;
}
.wrap div{
width:25%;
height: 150px;
box-sizing: border-box;
line-height: 150px;
text-align: center;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

上面代码的效果图(换行-在下方)

以后有在了解的再补上

css flex布局的更多相关文章

  1. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  2. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  3. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  4. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  5. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  6. [Web 前端 ] 还在用浮动吗?CSS flex布局你了解多少?

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  7. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  9. css flex布局,小程序flex布局,垂直居中完美解决

    flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...

随机推荐

  1. maven上传jar到nexus本地仓库

    一.nexus新增本地仓库 Hosted Repository:本地仓库,部署组织内部的版本内容 Proxy Repository:代理仓库,代理远程的公共仓库,如maven中央仓库 Virtual ...

  2. linux安装php

    接上篇:linux安装apache 一.安装php 先安装libxml2库 [root@ctxsdhy package]# yum -y install libxml2-devel 最新地址在:htt ...

  3. 将文件移出版本控制 (Revision Control)

    两条重要的 Git 命令: git rm -r -n --cached /path/to/the/directory git rm -r --cached /path/to/the/directory ...

  4. 【JavaWeb】SSM+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(六)

    Showings 我个人的项目,当前不断地在更新. 我希望做成一个好项目,同时,也是在锻炼自己的技术. 在项目中发现问题,学习知识,是比较可取的一条路子. 这样学习到的知识,虽然分散,但是都很实用,而 ...

  5. Tlist删除技巧

    二.    从TList开始分析-- 为了写一个更好的性能ISAPI Filter,我需要更快速地从TList中删除部分连续的Item.比如这样的一段代码: var p : pChar = 'abcd ...

  6. Date类

    Date类 构造方法: Date():根据当前的默认毫秒值创建对象 Date(long date):根据给定的默认毫秒值创建对象 成员方法: public long getTime():获取时间,以毫 ...

  7. JavaScript中的私有属性

    一.使用构造函数获得私有属性: function Gadget(){ var name = 'iPod'; this.getName = function(){ return name; }; }; ...

  8. mysql定时任务

    查看event是否开启: show variables like '%sche%'; 将事件计划开启: set global event_scheduler=1; 关闭事件任务: alter even ...

  9. 第四章 --- 关于Javascript 设计模式 之 迭代器模式

    今天我先写 两个常用的迭代器的 例子.(同学们先自行体会这二种迭代器的优缺点) 需求:比较两个数组是否相等 tips: 当数组的下标不为数字的时候,默认为 该键值对 为 对象. 然后迭代器的原理基本来 ...

  10. vim 编辑器的光标操作

    vim中最简单的移动光标的方式是使用使用方向键操作,但这种方式的效率底下,更高效的方式是使用快捷键,常用的快捷键如下表所示. 快捷键                                 功 ...