第二节弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）

Fiki515 2023-06-26 原文

一、弹性盒子的定义

弹性盒子（ Flexible Box 或 flexbox）：CSS3的一种新布局模式。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

二、flex-direction属性：决定主轴的方向（即项目的排列方向）

row（默认值）：主轴为水平方向，起点在左端；
row-reverse：主轴为水平方向，起点在右端；
column：主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
             width: 500px;
			height: 500px;
			background-color: #E83E78;
            display: flex;
            /*flex-direction: row;               水平方向，起点在左边;
            flex-direction: row-reverse;         水平方向，起点在右边;
            flex-direction: column;              垂直方向，起点在上边;
            flex-direction: column-reverse;      垂直方向，起点在下边。
            */
        }
        .box .box1{
				width: 200px;
				height: 200px;	
		}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
		}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
		}
			.box .box1:nth-of-type(3){
				background-color: #00f;
	    }
    </style>
    <title>弹性盒子</title>
</head>
<body>
<div class="box">
    <div class="box1">项目1</div>
    <div class="box1">项目2</div>
    <div class="box1">项目3</div>
</div>
</body>
</html>

三、flex-wrap属性：

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行；
wrap：换行，第一行在上方；
wrap-reverse：换行，第一行在下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box{
				display: flex;
				width: 500px;
				height: 500px;
				background-color: #E83E78;
            /*flex-wrap: nowrap;        不换行;
              flex-wrap: wrap;          换行，第一行在上方;
              flex-wrap: wrap-reverse;  换行，第一行在下方。*/

        }
        .box .box1{
			width: 200px;
			height: 200px;	
		}
		.box .box1:nth-of-type(1){
			background-color: #FFC0CB;
		}
		.box .box1:nth-of-type(2){
			background-color: #f0f;
		}
		.box .box1:nth-of-type(3){
			background-color: #00f;
		}
		.box .box1:nth-of-type(4){
			background-color: #ff0;
		}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

四、flex-flow属性：

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；

五、justify-content属性：定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐；
flex-end：右对齐；
center：居中；
space-between：两端对齐，项目之间的间隔都相等；
space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

       .box{
			display: flex;
			width: 500px;
			height: 500px;
			background-color: #E83E78;
          
            /*justify-content: flex-start;       左对齐;
            justify-content: flex-end;         右对齐;
            justify-content: center;           居中;
            justify-content: space-between;    两端对齐，项目之间的间隔都相等;
            justify-content: space-around;     每个项目两侧的间隔相等。
*/

        }

        .box .box1{
				width: 200px;
				height: 200px;	
			}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
			}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
			}
			.box .box1:nth-of-type(3){
				background-color: #00f;
			}
			.box .box1:nth-of-type(4){
				background-color: #ff0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

六、align-items属性：定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：与交叉轴的中点对齐;
stretch（默认值）：轴线占满整个交叉轴。
baseline 与第一行文字基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

       .box{
			display: flex;
			width: 500px;
			height: 500px;
			background-color: #E83E78;
            align-items: flex-start;          交叉轴的起点对齐；
            align-items: flex-end;            交叉轴的终点对齐；
            align-items: center;              与交叉轴的中点对齐；
            align-items: stretch;             轴线占满整个交叉轴
            align-items: baseline             与第一行文字基线对齐
        }

       .box .box1{
				width: 200px;
				height: 200px;	
			}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
			}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
			}
			.box .box1:nth-of-type(3){
				background-color: #00f;
			}
			.box .box1:nth-of-type(4){
				background-color: #ff0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

七、align-content属性：定义了多根轴线的对齐方式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

       .box{
			display: flex;
			width: 500px;
			height: 500px;
			background-color: #E83E78;
            align-content: flex-start;          交叉轴的起点对齐；
            align-content: flex-end;            交叉轴的终点对齐；
            align-content: center;              与交叉轴的中点对齐；
            align-content: space-between;       与交叉轴两端对齐，轴线之间的间隔平均分布；
            align-content: space-around;        每根轴线两侧的间隔都相等
            align-content: stretch;             轴线占满整个交叉轴
        }

       .box .box1{
				width: 200px;
				height: 200px;	
			}
			.box .box1:nth-of-type(1){
				background-color: #FFC0CB;
			}
			.box .box1:nth-of-type(2){
				background-color: #f0f;
			}
			.box .box1:nth-of-type(3){
				background-color: #00f;
			}
			.box .box1:nth-of-type(4){
				background-color: #ff0;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">盒子1</div>
			<div class="box1">盒子2</div>
			<div class="box1">盒子3</div>
			<div class="box1">盒子4</div>
		</div>
	</body>
</html>

有关第二节弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）的更多相关文章

ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？最佳答案您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
ruby - 多个属性的 update_column 方法 - 2
我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案您可以使用update_columns(attr1:val1,attr2:val2
ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2
在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
ruby - Nokogiri 剥离所有属性 - 2
我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog
ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2
对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？最佳答案将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs
ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2
所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP
ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么？ - 2
假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人？如何根据它对它们进行排序？最佳答案这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)
ruby-on-rails - 为模型创建状态属性 - 2
我想为我的Task模型创建一个status属性，该属性将按以下顺序指示它在三部分进度中的位置:打开=>进行中=>完成。它的工作方式类似于亚马逊包裹的交付方式:已订购=>已发货=>已交付。我想知道设置此属性的最佳方法是什么。我可能是错的，但创建三个独立的bool属性似乎有点多余。实现此目标的最佳方法是什么？最佳答案 Rails4有一个内置的enummacro.它使用单个整数列并映射到键列表。classOrderenumstatus:[:ordered,:shipped,:delivered]end状态映射如下:{ordered:0,

第二节 弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）