弹性盒子(弹性布局)

display: flex;

将一个标记变成弹性盒子就在css中使用 display: flex;

变成弹性盒子以后里面的内容会按照主轴(左右水平方向)分布

flex-direction: column 会使主轴的左右方向变为侧轴(垂直上下)的方向(row 主轴行 column 侧轴列 )

如果子标记尺寸超过弹性盒子(父标记)的尺寸弹性盒子(父标记)会压缩子标记

如果子标记尺寸超过弹性盒子(父标记)的尺寸可以用flex-wrap: wrap;让子标记换行

justify-content 在主轴方向显示规则属性值有:

1. justify-content :space-around 每个子标记左右两边间距相同(并且两边的子标记到边框的距离等于子标记之间距离的一半)

2. justify-content :space-between 两端对齐子标记之间间距相同

3. justify-content :space-evenly 不管是子标记之间还是和父标记边框之间的间距都相同

4. justify-content :flex-start 靠左无间距

5. justify-content :center 居中无间距

6. justify-content :flex-end 靠右无间距且是整体靠右

align-items 决定的是侧轴的显示方式会分成n等份在每一份空间里置顶(flex-start)居中(center)或者靠下(flex-end)

align-items: flex-start;

align-content 决定的是侧轴的显示方式不会等分空间直接在父标记里置顶(flex-start)居中(center)或者靠下(flex-end)

align-content: center;

flex样式

flex: n; 让子标记按比例显示写在子标记里

flex:0 0 300px 让其中一个子标记固定尺寸其他子标记按比例占据

如果主轴是水平方向的那么300px占的是宽度

如果主轴是垂直方向(侧轴) 那么300px占的是高度

        .s1{/* 第一个先占300px 剩下的子标记按比例分配 */flex: 0 0 300px;}.s2{flex: 1;}.s3{flex: 2;}.s4{flex: 3;}

弹性盒子(弹性布局)相关推荐

css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴水平主轴主轴的开始位置(与边框的交叉点)叫做m ...
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
【HTML/CSS】弹性盒子 flex布局制作一个动画卡片
可以自己去找动画人物纯色背景,这样抠图比较容易. 字体是我随便找的下面是代码(看不懂没事): <!DOCTYPE html> <html lang="en"&g ...
弹性盒子flex布局
今天打开我的csdn,竟然涨了7个粉丝,哈哈.为了我新涨的粉丝们,决定今晚加更一篇文章~ 目录一.flex弹性布局与传统布局的区别: 二.flex布局介绍三.父元素常见属性四.子元素常见属性五 ...
简述弹性盒子 flex 布局及 rem 布局
rem简介: rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修 ...
css弹性盒子--弹性布局flex-grow、flex-shrink、flex-basis详解
flex-grow.flex-shrink.flex-basis三个属性的作用: 在flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的. (注意:这三个属性都是在子元素上设置的,下面小编 ...
CSS中flex弹性盒子——弹性容器属性，弹性元素属性（附图）
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,2009 ...
CSS 弹性盒子布局详解
CSS 弹性盒子弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...

弹性盒子(弹性布局)

弹性盒子(弹性布局)相关推荐

最新文章

热门文章