精华内容
下载资源
问答
  • flex布局主轴元素单独设置对齐方式

    万次阅读 2017-04-28 11:12:13
    今天用flex布局,想在主轴上设置某个flex-item右对齐,其他的左对齐,我以为直接用align-self属性就可以了,结果没效果,后来仔细阅读文档,发现align-self属性是用在单个元素的交叉轴的设置上,主轴元素没有找到...
    • 今天用flex布局,想在主轴上设置某个flex-item右对齐,其他的左对齐,我以为直接用align-self属性就可以了,结果没效果,后来仔细阅读文档,发现align-self属性是用在单个元素的交叉轴的设置上,主轴元素没有找到设置单个元素的属性。
    • 我要的效果是这样的(主轴方向为水平方向)
    • 这里写图片描述
    • 但是实际效果所有元素左对齐
    • 这里写图片描述
    • 于是我就对最右边的元素设置以下css就成功了
    .inline-field.inline-field-add{
        flex-grow: 1;//这三个元素只有它在有空余空间时可伸缩,也就是它占据了所有剩余空间
        display: flex;//将它设置为flex,就可以单独对他进行主轴右对齐
        justify-content: flex-end;
    }
    展开全文
  • //主轴为竖向 align-items: center; } 若容器内竖向空间不足,子项目的height可能不起作用,被直接压缩为0,此时需设置其flex属性(flex: flex-grow, flex-shrink 和 flex-basis的简写)以解决被压缩问题: style
    .wrap{
        display: flex;
        flex-direction: column;//主轴为竖向
        align-items: center;
    }
    若容器内竖向空间不足,子项目的height可能不起作用,被直接压缩为0,此时需设置其flex属性(flex: flex-grow, flex-shrink 和 flex-basis的简写)以解决被压缩问题:
    style="display: flex;justify-content: space-around;margin-bottom: 20px;flex: 0 0 auto;width: 100%;"

     
    
    展开全文
  • 就是利用主轴上的需要单独设置位置的元素填充剩下的空间,然后将其设置成flex容器,它的子元素就可以靠其他位置了<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...

    就是利用主轴上的需要单独设置位置的元素填充剩下的空间,然后将其设置成flex容器,它的子元素就可以靠其他位置了

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		body {
    			margin: 0;
    		}
    		ul {
    			margin: 0;
    			padding: 0;
    		}
    		li {
    			list-style: none;
    		}
    		.top-bar {
    			font-size: 20px;
    			line-height: 3;
    			color: #fff;
    			background-color: darkcyan;
    		}
    		.container {
    			max-width: 1200px;
    			margin: 0 auto;
    		}
    		.top-bar-content {
    			display: flex;
    		}
    		.logo {
    			margin-right: 4em;
    		}
    		.menu-list {
    			display: flex;
    		}
    		.menu-list > li {
    			margin-right: 2em;
    		}
    		.other-option {
    			flex-grow: 1;
    			display: flex;
    			justify-content: flex-end;
    		}
    		.contact {
    			margin-right: 2em;
    		}
    	</style>
    </head>
    <body>
    	<div class="top-bar">
    		<div class="container">
    			<ul class="top-bar-content">
    				<li class="logo">logo</li>
    				<li>
    					<ul class="menu-list">
    						<li>首页</li>
    						<li>产品</li>
    						<li>服务</li>
    					</ul>
    				</li>
    				<li class="other-option">
    					<div class="contact">联系我们</div>
    					<div>登录</div>
    				</li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>复制代码



    展开全文
  • Flex主轴与交叉轴

    千次阅读 2020-04-18 20:11:38
    Flex中提出了一个重要的概念——轴 它两个轴:主轴 和 交叉轴 默认情况下主轴是水平的: 下面我们用Flex布局的方式实现三个小盒子的水平垂直居中: <style> .box{ width: 200px; height: 200px; ...

    Flex中提出了一个重要的概念——轴
    它两个轴:主轴交叉轴
    默认情况下主轴是水平的:
    在这里插入图片描述
    下面我们用Flex布局的方式实现三个小盒子的水平垂直居中:

    	<style>
    		.box{
    			width: 200px;
    			height: 200px;
    			border: 1px solid;
    		}
    		div{
    			width: 50px;
    			height: 50px;
    			border: 1px solid;
    		}
    	</style>
    	<div class="box">
    		<div>1</div>
    		<div>2</div>
    		<div>3</div>
    	</div>
    

    在这里插入图片描述
    我们在父级div中加上主轴和交叉轴居中:

    	display: flex;
    	justify-content: center; //主轴居中
    	align-items: center; //交叉轴居中
    

    呈现出来的效果是这样的:
    在这里插入图片描述
    和我们预计的效果不太一样,两轴居中,div并非像初始那样竖向排列,反而是横向的,这是为什么呢?
    因为当我们选择使用Flex布局时,Flex容器的默认主轴已经决定了Flex项目的排列方式是水平的
    所以我们只需要通过改变主轴的方向来改变他的排列方式就可以了

    flex-direction: column; //主轴为垂直方向,起点在上沿
    

    之后就达到了我们想要的效果了:
    在这里插入图片描述
    PS:我们将主轴改成了垂直方向,所以
    justify-content: center; 控制的是垂直方向的居中
    align-items: center; 控制的是水平方向的居中

    实际上在Flex中,主轴和交叉轴跟我们在平面中的xy轴非常相似,那为什么要引入这么一个看似很复杂的概念呢 ?
    如果用xy的概念,justify和align等众多属性描述起来将会变得异常复杂

    justify-content: flex-start|flex-end|center|space-between|space-around;
    

    flex-start :默认值 项目位于容器的开头
    flex-end :项目位于容器的结尾
    center :项目位于容器的中心
    space-between :项目位于各行之间留有空白的容器内
    space-around :项目位于各行之前,之间,之后都留有空白的容器内

    align-items: stretch|center|flex-start|flex-end|baseline;
    

    在这里插入图片描述

    展开全文
  • 指定了 flex 元素在主轴方向上的初始大小 | flex-basisCSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-...
  • flex实现在主轴上的排列

    千次阅读 2018-01-01 16:01:27
    flex实现在主轴上的排列 *{margin: 0;padding: 0;} .fk>img{ width: 288px; } .fk{ width: 1200px; height: 427px; border: 2px solid chocolate; margin: 90px auto; display: flex; /*设置项目在主轴...
  • 小程序flex纵向布局,主轴属性不起作用,justify-content:flex-start/flex-end/space-around; 都没有用,是不是哪里搞错了? 求教大家主轴为纵轴,justify-content:flex-start,按理说 子元素应该是从 主轴开始位置 ...
  • 可以知道这个词英译为列,这里作用于排列方式为y为主轴 direction:方向 顾名思义为设置方向 flex-direction:row;(不设置,默认就是这个) 主轴为x,起点从左到右。(下图中1是起点) flex-direction:row-...
  • justify-content是主轴对齐的对齐方式 当主轴方向是row(行 默认值) flex-start (默认值)左对齐 flex-end 右对齐 center 水平居中 当主轴方向是column(列) flex-start (默认值)顶端对齐 flex-end 底部对齐 ...
  • flex布局       flex : flexible box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。       flex...
  • 什么是(flex)弹性盒子主轴和侧轴

    千次阅读 2020-08-18 20:14:54
    flex)弹性盒子的主轴和侧轴 弹性盒子分为主轴和侧轴(又称交叉轴) 属性:flex-direction 主轴设置:flex-direction :row 或row-reverse 主轴通俗来讲就是,X轴 侧轴设置:flex-direction :column 或column-...
  • 设置在主轴上的排列方式 默认情况下,是从左往右排列。在主轴方向上,可以通过justify-content进行设置: 1. flex-start:项目靠近父盒子的左侧 2. flex-end:项目靠近父盒子的右侧 3. center : 居中显示 ...
  • 实现的方法有很多,我们这里要讨论的是:如何简洁地使用 Flex 布局来实现?我这里采用的方法是:使用自动的外边距在主轴上对齐。 这篇主要讲解外边距的应用,不用 justify-content: space-evenly; 来实现。 自动的...
  • 主轴上平均分布 justify-content:space-around; 懂得都懂 justify-content:flex-start;(不加这个代码,默认也是这个) 从左边开始摆放 justify-content:flex-end; 从右边开始摆放 ...
  • flex-direction版本:CSS3CSS flex-direction属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。示例/* the direction text is laid out in a line */flex-direction: row;/* like ...
  • 1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse,那么主轴就是justify-contain 如果flex-direction是column或者column-reverse,那么主轴就是align-items 转载于:...
  • flex-basis项目占据的主轴空间 flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。 浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 .item { flex-...
  •  justify-content:设置主轴上子元素的排列方式 justify-content 的属性值如下: 属性值 含义 flex-start 从主轴的头部开始排,主轴:x轴 左对齐;y轴 顶部对齐(默 认值) flex-end 从主轴的尾部开始排,...
  • flex

    2020-12-28 16:56:25
    /flex-direction:改变主轴 row:左边 row-reverse反向/ /flex-direction: row-reverse;/ /column竖 column-reverse反向/ /flex-direction:column-reverse;/ flex-direction: row; /flex-start:主轴开始位置; flex-...
  • 1 2 3 主轴方向 flex-direction: row; 1 2 3 主轴方向 flex-direction: row-reverse; 1 2 3 主轴方向 flex-direction: column; 1 2 3 主轴方向 flex-direction: column-reverse; 1 2 3 demo 效果
  • CSS Flexible Box Layout 就是css的弹性盒子布局,简称flex布局,相对于box布局来说,功能更多一些,使用起来也...主轴和侧轴的定义是通过定义flex-direction属性得来的,也就是说,你定义flex-direction为row或row-...
  • flex布局中,是通过在容器上设置justify-content属性来规定子元素在容器中主轴上的排列方式 而如果要单独设置子元素的排列方式,则可以通过子元素的margin属性实现,例如: .container { display: flex; justify-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,214
精华内容 6,085
关键字:

flex不同主轴