CSS弹性布局（排列方式、项目换行、主轴对齐方式）

在弹性布局里，父元素称为容器，子元素称为项目。项目排列由容器控制，控制属性都写在容器里。要使用弹性布局，要先使父元素display:flex;

例：以下写了项目的排列方式、项目换行、项目的对齐方式

<!-- HTML -->
<div class="baba"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>

/* CSS */
.baba{background-color: yellowgreen;/* 让父元素变成flex布局 */display: flex;/* 容器属性1：主轴方向（flex-direction），就是在容器中项目的排列方式 *//* 默认方向，横向从左向右，左是起点~右是终点 */flex-direction: row;/* 横向从右向左，右是起点~左是终点 */flex-direction: row-reverse;/* 纵向从上向下，上是起点~下是终点 */flex-direction: column;/* 纵向从下向上，下是起点~上是终点 */flex-direction: column-reverse;/* 项目换行 *//* wrap nowrap wrap-reverse *//* 默认不换行 */flex-wrap: nowrap;/* 换行 --宽度是生效状态 */flex-wrap: wrap;/* 反向换行 */flex-wrap: wrap-reverse;/* 简写 包含主轴方向和是否换行 */flex-flow: row wrap;/* 主轴方向对齐方式 *//* 起点对齐，起点是主轴的开始方向 */justify-content: flex-start;/* 终点对齐，终点是主轴的结束方向 */justify-content: flex-end;/* 居中对齐 */justify-content: center;/* 两端对齐 */justify-content: space-between;/*  */justify-content: space-around;} .baba>div{width: 100px;height: 100px;border: 2px solid #000;background-color: #F00;}

CSS弹性布局（排列方式、项目换行、主轴对齐方式）相关推荐

弹性布局最后一行的元素的对齐方式设置
随着技术的不断更新换代,网页布局也增加了弹性布局方式,不得不说弹性布局是真的很好用,但好用的同时也给我们带来一些不便之处.比如在布局列表内容时经常会用到子项目的两端对齐,但最后一行不需要两端对齐我们 ...
一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子弹性盒子的属性全都是写在父元素上面 1.1基础解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
css弹性布局多个div居中多行锤子水平居中万能方案
css弹性布局多行锤子水平居中万能方案任何一个容器可以指定为flex布局,但是td和th等标签本身已有布局,所以重写display属性会使元素失去原有的布局特性 *{display:flex} ...
CSS弹性布局 Flex属性
flex是Flexible Box的缩写,就是弹性盒子布局的意思通过flex我们可以解决元素居中问题,自动弹性伸缩,适配不同大小的屏幕和移动端. Flex布局简介序号简记术语 1 二成员容器 ...
css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局
#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
前端css弹性布局，响应式布局，多列布局
前端css弹性布局,响应式布局,多列布局主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...

CSS弹性布局（排列方式、项目换行、主轴对齐方式）

CSS弹性布局（排列方式、项目换行、主轴对齐方式）相关推荐

最新文章

热门文章