给自己看的flex布局方法

flex是flexiblebox的缩写，中文名字弹性盒子布局,在小程序布局中支持的很好

在试验之前可以看一下张鑫旭的flex https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

1.给父容器设置了display:flex;则内部容器的块状特性会自动消失(再给内部元素设置display:block无效):

2.设置flex-direction:column则其子元素为垂直排列(高度会自适应) ,

如果不设置flex-direction，则默认会设置成row(横向布局)

3.设置颠倒(所有元素对齐的方向也会改变，对于竖直排序的也一样):

4.justify-content:start/end 设置了子元素的对齐方向

justify-content:center 设置子元素居中

justify-content:space-between :平均分布

justify-content:space-between :等距分布（1号元素与2号元素与3号元素左右的距离都相等）

垂直居中:

垂直水平居中:

5.主轴和交叉轴：

谁是主轴根据flex-direction来指定

row:水平方向是主轴

colmun:垂直方向的是主轴

justify-content指的是主轴上面的排列方式；

align-items指的是交叉轴上面的排列方式；

要下图的布局方式是对垂直方向的子元素的对齐方向改变，所以只需要justify-content的样式:

根据文字基线对齐

如果子元素的宽度大于父元素的宽度，又没有设置换行，则会自动调整子元素宽度

设置换行（设置高度可以消除与上边两个的间距）

转载于:https://www.cnblogs.com/rmty/p/10901542.html

给自己看的flex布局方法相关推荐

前端笔记（03）——一文看懂flex布局
文章目录前言一.flex基本介绍. 二.父容器属性介绍 1.父容器属性概述 2.flex-direction属性 3.flew-wrap属性 4.flex-flow复合写法 5.justify-c ...
Flex布局完全教程
背景介绍 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块目标在于提供一个更有效地布局.对齐方式,并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙. Flex ...
学习flex布局（弹性布局）
Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
flex布局超级详细的完整教程(看完印象深刻)
flex布局超级详细教程文章目录 flex布局超级详细教程 flex 布局父项常见属性 ①.flex-direction:设置主轴的方向 ②. justify-content:主轴上的子元素排列方式 ...
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...
解决flex布局space-between最后一行布局问题超简单方法
如果flex布局中justify-content设置为space-between.space-evenly或者space-around 并且最后一行与上面一行个数不同时,布局会裂开 1个contain ...
Flex布局设置内容强制不换行无效的解决方法
使用弹性盒子Flex布局非常方便,比如实现左右布局的时候,简短的两行样式就实现了.不过虽然Flex布局很灵活,但有时候也会出现一些意想不到的效果,比如这里举个简单的示例: <style> ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...

给自己看的flex布局方法

给自己看的flex布局方法相关推荐

最新文章

热门文章