flex基础详解

最新推荐文章于 2023-09-13 16:21:52 发布
最新推荐文章于 2023-09-13 16:21:52 发布
阅读量217 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 菜鸡提升第一步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lemon94924/article/details/95481586
博客详细介绍了Flexbox布局的相关属性。包括justify - content主轴对齐方式，如flex - start、flex - end等；align - items交叉轴对齐方式，像flex - start、flex - end等；flex - direction决定主轴方向，有row、column等；flex - wrap处理轴线排不下时的换行情况，如wrap、no - wrap等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. justify-content （主轴对齐方式）

flex-start(从左侧对排列齐)
flex-start
flex-end（靠右侧对齐排列）
在这里插入图片描述

center(在中间对齐排列)
在这里插入图片描述

space-around(盒子间的间距是盒子与边界间距的2倍)
在这里插入图片描述

space-evenly(各处间距相等)
在这里插入图片描述

space-between(左右靠边，中间等间距排列)

在这里插入图片描述

2.align-items（交叉轴对齐方式）

flex-start(上对齐)
在这里插入图片描述

flex-end(下对齐)
在这里插入图片描述

center(居中对齐)
在这里插入图片描述

stretch(拉伸，不设置高度时自动拉伸)
在这里插入图片描述

baseline（基于文字基线对齐）
在这里插入图片描述

3.flex-direction决定主轴的方向

row(主轴为水平方向，起点在左端)
在这里插入图片描述

2. row-reverse（主轴为水平方向，起点在右端）
在这里插入图片描述

column（主轴为垂直方向，起点在上沿）
在这里插入图片描述

column-reverse(主轴为垂直方向，起点在下沿)

在这里插入图片描述

4.flex-wrap(如果一条轴线排不下，如何换行)

wrap(默认值)

在这里插入图片描述

no-wrap(不换行)
在这里插入图片描述

wrap-reverse（换行，第一行在下方）

在这里插入图片描述

关于flex布局的简单讲解，以及基础使用
afae_1的博客
04-14 1952
justify-conten属性定义了内部元素在主轴上的对齐方式，共有6个属性值： flex-start | flex-end | center | space-between | space-around | space-evenly，（下面例子均为默认主轴方向，即水平时左边界为始端，垂直时上边界为末端，且交叉轴对齐方式默认为flex-start）交叉轴默认以上边界为始端，下边界为末端。在Css的后续更新中，为justify-conten属性增添的新属性，也同样为algin-content属性增添了。
Flex布局详解
segegefe的博客
03-03 2324
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束线（main/cross-
flex各种用法
Just Code
01-19 216
小结   //获得屏幕的分辨率 var x:Number=Capabilities.screenResolutionX; var y:Number=Capabilities.screenResolutionY; Alert.show("x="+x+"y="+y); //第二种方法 Alert.show(stage.fullScreenWidth+"=="+stage.fullScre...
flex中as as用法 as
ddm13142005的博客
01-07 214
每一种编程语言都提供强制类型转换，允许你将某一种数据类型转换成另一种数据类型，AS3自然也不例外。但是虽然我编写了不少Flex程序，对AS3中的强制类型转换还是不太清楚，以前AS中是这样进行强制类型转换的：假设有一个类叫做Class1，我们声明了一个它的对象 c1，如果想要将它转换成Class2类型，只要这样写： Class2(c1);在AS3中你依然可以这样写，但是AS3 中提供...
【转】Flex 布局语法教程
weixin_33935777的博客
07-13 501
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。...
flex布局语法以及实操，一文带你吃透flex布局的基础
最新发布
心态的博客
09-13 6996
Flex弹性布局已是目前最为流行的布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。以上就是今天要讲的内容，本文仅仅简单介绍了Flex布局的使用，而Flex的功能还不止于此，如果大家还想了解更多的前端知识和flex布局的相关内容，可以到MDN上面去了解更多的知识，学无止尽。
学习flex基础用法，这篇就够啦
ccattempt的博客
02-05 3020
flex布局是目前常用的一种布局方式，这篇文章主要对flex的常用基础知识做一个整理。 目录1、flex简介2、主轴上的设置2、侧轴上的设置4、其余部分参考链接 1、flex简介 flex布局是一种一维布局（网格布局则是一种二维布局）。这种布局主要作用于父级容器，通过控制父级容器的排列规则来达到需要的效果。任何一个元素都可以使用flex布局，只要给元素添加display: flex;即可。我们把添加了display: flex;的元素称为容器，元素内部的子元素称为项目。 从上图我们可以看出，flex布.
flex基础语法介绍
zjl609859169的博客
12-15 1046
flex基础语法介绍 《轴线与网格》里主要讲述了grid与flex中，网格与轴线的基本概念，了解了这些基本概念之后，我们可以更轻松地对布局方式进行研究，这一篇文章主要描述flex布局中，定义在容器与项目的相关属性。 本篇文章是依据我个人的所学所知，且部分参考国内外优秀的flex布局的相关文献总结而得。 定义在容器的属性 disaplay display属性定义了一个弹性盒子容器，容器是展
flex基础
gufudhn的博客
05-08 385
flex:1; 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： 设置第二个弹性盒元素的初始长度为 80 像素： <style> #main{ width: 220px; height: 300px; border: 1px solid black; display: flex; } #main div{ flex: 1; } </style> &lt
Lemon语法分析生成器说明书
11-14
Lemon语法分析生成器英文说明，方便学习lemon的同学学习
flex基础代码
编程日常记录与总结 https://franciswmf.iteye.com
04-12 240
$(function () { var urlInfo = window.location.href; //获取当前页面的url //alert("AAflex:" + urlInfo); var intLen = urlInfo.length; //获取url的长度 var offset = urlInfo.indexOf(
Flex 基础语法（一）
weixin_30436101的博客
03-14 122
任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ d...
Flex开发实战(一)--Flex的详细介绍
weixin_30919919的博客
06-24 651
背景 由于最近要维护公司的项目，项目里面用到了Flex技术，所以最近一直在恶补，这篇博文就将最近的学习内容，进行一下简单的总结。 无论是做web还是桌面应用，相信大家对于界面的要求已经越来越高，界面趋于大图标，扁平化，要求不断提高用户体验度高，把握好人机交互。相应的技术也层出不穷，例如：Flex，JQuery，Ajax，HTML5+CSS3等等吧。 什么是Flex ...
Flex入门（一）——基本理论
学会改变自己——才能突破
07-27 3545
Flash作为一款漂亮动画的产品，是大家所喜爱的，他可以给我们带来更好的视觉效果。但是如何使其很快很好的让Java程序员，.net程序员等所接受，并进行相关开发，Macromedia公司在2004年3月发布的，基于其专有的MacromediaFlash平台，它是涵盖了支持RIA（Rich Internet Applications）的开发和部署的一系列技术组合。 是一种类似于Jsp和Asp的前台技
flash/flex基础发展区别等
liwb94的博客
01-14 722
原文地址：https://blog.youkuaiyun.com/xygg0801/article/details/53323136 很好的一篇文章 博主总结了很多资料  本文和大家重点讨论一下Flex和Flash的区别和联系，Flex也继承了Flash在表示层上先天性的美感、除了视觉上的舒适感外，还天生具备方便的矢量图形、动画和媒体处理接口。虽然Flex和Flash有众多的相似点，但是不同之处仍然很多，...
Flex编程学习基础
Tony Chen的专栏
11-08 5341
Flex是Adobe公司推出的一项RIA（Rich Internet Application富互联网应用程序）开发技术，和Ajax一样都是Web2.0非常流行的前台开发技术，Flex比Ajax的优势是所有的浏览器的效果都一样，做出来的效果更炫，通常用于许多基于Web游戏开发。其缺点是浏览器必须安装Flash插件，因为Flex编译过后会生成Flash格式的文件在浏览器中运行，同时由于Flex生成的文件一般比较大，如果优化的不好，会影响应用速度。我在上一家公司中，因为项目需要，我曾经学习和使用了半年时间的Fle
flex 布局基础入门
m0_56966142的博客
02-19 556
一、flex 布局基础 1.1 flex 布局与传统布局 优缺点 传统布局 flex布局 兼容性好 操作方便，布局简单，移动端应用广泛 布局繁琐 PC端浏览器支持 1.2 flex 布局原理 1. 概述 flex 是 flexible Box 的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。 Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度
带你由浅入深的了解 flex 的基础用法
原地起飞
08-24 2118
文章目录传统布局与flex布局的区别一、体验 flex 布局二、flex 布局父项常见元素1.flex-direction 设置主轴的方向2.justify-content 设置主轴上的元素排列方式3.flex-wrap 设置子元素是否换行4.align-items 设置侧轴上的子元素排列方式（单行）5.align-content 设置侧轴上的子元素排列方式（多行）6.algin-content和algin-items的区别三、flex 布局子项常见元素1. flex: number;2.flex-basi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值