Flex布局

时间：2019-03-08 00:51:53 阅读：187 评论：0 收藏：0 [点我收藏+]

Flex容器的属性

flex布局　　弹性盒子布局模型【自适应】

容器可以控制内部元素高度和宽度

flex direction　　布局方向

技术分享图片

---------------------------------------

原始样式：

技术分享图片

=================================================

技术分享图片

justify-content: space-around;

　　设置容器内部元素的对齐方式默认:flex-start

　　1.flex-start 默认左对齐

　　2.flex-end 右对齐

　　3.center 居中对齐

　　4.space-between 设置容器内元素直接的等量间隙

　　5.justify-content: space-around; 设置元素之间的间隙

----------------------------------------------------------------------

justify-content: center;

技术分享图片

------------------------------------------------------

justify-content: flex-end;　　　　【右对齐】

技术分享图片

-------------------------------------------

justify-content: space-between;

------------------------------------------------------

justify-content: space-around;

-------------------------------------------------------

align-items:　　每个元素再交叉轴上的对齐方式

1.flex-start,flex-end

2.conter

3.baseline,stretch

原文：https://www.cnblogs.com/vip-deng-vip/p/10493456.html

踩

(0)

评论一句话评论（0）

分享档案

更多>