关于flexbox一些练习

最新推荐文章于 2024-04-03 07:34:46 发布
最新推荐文章于 2024-04-03 07:34:46 发布
阅读量339 收藏
点赞数
分类专栏： 网站前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_fong/article/details/78529384
版权 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p {
	margin: 20px 0 5px;
	color: #666;
	font-size: 14px;
}
.container {
	display: flex;
	width: 200px;
	height: 100px;
	background-color: #ddd;
}
.item {
	font-size: 12px;
}
.item:first-child {
	background-color: #F60;
}
.item:nth-child(2) {
	background-color: #FC0;
}
.item:nth-child(3) {
	background-color: #690;
}
.item:last-child {
	background-color: #06F;
}
.container .item {
	width: 60px;
	height: 30px;
}
.container-0 .item {
	width: auto;
	height: auto;
}
.container-2 {
	flex-direction: column-reverse;
}
.container-3 {
	flex-wrap: wrap;
}
.container-4 {
	flex-wrap: wrap;
	justify-content: space-between;
}
.container-4 .item {
	width: 50px;
}
.container-5 {
	flex-wrap: wrap;
	align-content: space-around;
}
.container-6 {
	flex-wrap: wrap;
	align-items: center;
}
.container-5 .item:first-child, .container-6 .item:first-child {
	height: 40px;
}
.container-7 .item:first-child {
	order: 1;
}
.container-8 .item:first-child {
	align-self: flex-end;
}
.container-9 .item {
	width: 40px;
}
.container-9 .item:nth-child(2) {
	flex-grow: 1;
}
.container-9 .item:nth-child(3) {
	flex-grow: 2;
}
.container-10 .item {
	width: 80px;
}
.container-10 .item:nth-child(2) {
	flex-shrink: 0;
}
.container-11 {
	justify-content: center;
}
.container-11 .item {
	width: 40px;
}
.container-11 .item:last-child {
	flex-basis: 80px;
}
</style>
</head>

<body>
<h3>flexbox</h3>
<p>容器元素设置display: flex后，项目元素不设置高度就会自适应</p>
<div class="container container-0">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>项目元素的宽度总和大于容器元素，会自适应缩小</p>
<div class="container container-1">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>容器元素排列方式：竖排倒序 flex-direction: column-reverse</p>
<div class="container container-2">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>容器元素允许换行 flex-wrap: wrap</p>
<div class="container container-3">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>容器元素对齐方式：空间均分 justify-content: space-between</p>
<div class="container container-4">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>容器元素交叉轴内容对齐方式：均分 align-content: space-around</p>
<div class="container container-5">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>容器元素交叉轴项目对齐方式：居中 align-item: center</p>
<div class="container container-6">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>第1个项目元素设置顺序靠后 order: 1</p>
<div class="container container-7">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>第1个项目元素设置交叉轴对齐 align-self: flex-end</p>
<div class="container container-8">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>第2和3项目元素设置放大 flex-grow: 1和flex-grow: 2 （按数值均分剩余空间）</p>
<div class="container container-9">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>第2个项目元素设置不缩小 flex-shrink: 1 （默认为0，缩小）</p>
<div class="container container-10">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
<p>flex-basis优先级高于width </p>
<div class="container container-11">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
</body>
</html>



弗兰克的天空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初学FLEX做的小练习
05-08
练习涉及到FLEX常用控件，与后台交互的数据服务（RemoteObject,WebService）,FLEX的几种导航，FLEX事件。 详见作者博客 http://blog.csdn.net/iamyzs/article/details/7540962； http://blog.csdn.net/iamyzs/article/details/7541582； http://blog.csdn.net/iamyzs/article/details/7541256；
Flexbox 练习和总结
weixin_30752699的博客
12-19 242
练习地址： http://flexboxfroggy.com/ Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using thejustify-contentprope...
Flex使用指南，面试题附答案
最新发布
2401_84098033的博客
04-03 1137
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
Flex练习
zhuhai__yizhi的专栏
08-15 275
教程 #main { width: 400px; height: 400px; border: 1px solid #c3c3c3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } #main div {
Flex练习:写一个五子连珠游戏 Five And More
weixin_33709609的博客
03-31 90
注意：火狐和谷歌浏览器看不到效果,是因为在博客中，一些脚本无法配置，和Flex的兼容性无关 玩法：先选择棋盘中的一个棋子，然后点击你想移动到的空格，五个同样颜色在一条线上就可以消去。玩一把试试吧，个人记录已经1000多分了！ 棋盘可以拖动哦！ 玩 Linux 的时候，里面有个小游戏特别吸引我，原先叫 Glines，现在改名叫 Five And More，...
flex语法及练习
MrZZhou的博客
07-10 678
FLEX布局 1.在外层容器设置display：flex; 内部的节点称为项目。 2.flex有两条轴，水平的主轴，和垂直的交叉轴 3.容器的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content flex-direction表示主轴的方向:row（水平向右(默认)）/row-r
trillo:与Flexbox一起练习
03-26
在这个项目中，我们使用以下方法构建一个页面来练习Flexbox布局： 萨斯 BEM方法论 这里使用的一些高级CSS技术是： 使用SVG图标。 CSS自定义属性。 面具。 ...等等。 编译： 运行npm build:css
flexbox-customize-starter：与flexbox一起练习
02-18
flexbox-customize-starter：与flexbox一起练习
css_flex_box:练习在 CSS 中练习 flexbox
08-04
练习在 CSS 中练习 flexbox 这个项目只有一个主分支，是一个小项目，所以不需要更多的分支 我正在学习的东西： - 为推文嵌入添加弹性超能力*伸缩两个盒子的位置- Flex-direction 属性以排成一行- 使用 justify-...
Center-Flexbox-Starter：此存储库是我使用Flexbox的练习作业
02-15
Center-Flexbox-Starter：此存储库是我使用Flexbox的练习作业
CSS_Sass_Trillo:Flexbox练习
03-30
CSS_Sass_Trillo:Flexbox练习
flex布局练习
m0_37922443的博客
07-25 618
题目来源 题1：整体框架示例 使用Flex模型编写HTML页面 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
FlexboxLayout练习
柚子君的博客
01-05 329
一直以来有用FlexboxLayout, 但是没有对属性进行系统的整理, 现在整理下 主要参看文档 https://juejin.cn/post/6844903697500241928#heading-4 https://github.com/google/flexbox-layout 引入 引入最新版本 implementation 'com.google.android:flexbox:2.0.1' 默认的布局文件如下 <?xml version="1.0" encoding="utf-8".
练习flex布局
_小郑有点困了的博客
04-05 784
联系flex布局 头部样式，使用flex，两边有宽，中间flex：1，占满剩余 1，效果 2，html 3，css 宫格样式，有两种实现方式： 效果： 1，使用table，table-cell，外层盒子display：table;里层元素，display：table-cell，宽度百分比，左浮动 1.1html 1.2css 2，使用flex布局，外层盒子display: flex; ...
Flex练习-打游戏
LiuHu
07-04 214
引言：因为学了flex布局，但是不知道怎么使用，虽然知道做项目是很好的方式，但是还是不知道如何下手 如果你是零基础，推荐先看看这个：Flex语法 如果你觉得学的还可以，但是不知道怎么去验证，这里就很适合你 flex练习网址: 可能会遇到的阅读障碍 properties 属性（复数） cross axis 交叉轴 main axis 主轴 group items 项目（里面的东西） group container 容器（外面的大盒子） align 排列 evenly 均匀地 第1关： 主要介绍just.
flex布局练习题，面试必备，持续更新建议收藏~
你好呀，很高兴你在看这里~
06-15 5142
现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~
初学FLEX做的小练习（一）-静态页面部分
行动起来
08-15 190
前言： 练习涉及到FLEX常用控件，与后台交互的数据服务（RemoteObject,WebService）,FLEX的几种导航，FLEX事件。 相关工程代码请下载 http://download.csdn.net/detail/iamyzs/4284826 一、相关软件 Flex Builder4 MyEclipse5.5 tomcat6.0（我的路径 D:\apache-tomc...
Flex布局案例练习（一）
JHY97的博客
01-24 482
练习flex布局，以输入框为例 1.代码
练习 | flex布局------目标100个
A123ppleQueen的博客
08-20 409
昨天本来以为自己什么都懂了，结果一做题就显出原形。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .container{ width: 200px; height: 200px; background-color: #000000; display: fle..
flexbox 在线网站
05-18
以下是一些学习和实践 Flexbox 的在线网站： 1. Flexbox Froggy：一个游戏式的网站，可以帮助你学习和理解 Flexbox 的基本概念和属性。 2. Flexbox Defense：另一个游戏式网站，可以让你通过实践来掌握 Flexbox 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值