flex-direction:单个子级的"column“vs "row”
flex-direction是CSS中用于控制Flex布局方向的属性。它决定了Flex容器中子元素的排列方向。
- "column"：子元素按垂直方向从上到下排列。这意味着子元素会沿着主轴的垂直方向依次排列，交叉轴的方向则是水平方向。
- "row"：子元素按水平方向从左到右排列。这意味着子元素会沿着主轴的水平方向依次排列，交叉轴的方向则是垂直方向。
总结：flex-direction属性用于控制Flex容器中子元素的排列方向，"column"表示垂直方向排列，"row"表示水平方向排列。根据具体布局需求选择合适的方向，腾讯云提供的云服务器和对象存储等产品可以满足相关的云计算需求。
相关·内容
我知道这听起来像在flexbox上的另一个问题，这个问题在其他地方得到了解决，但我无法从google或堆叠溢出的现有帖子中找到解决方案。
问题很简单。
我有3个子div在一个父div中，其中一个包含一个大于其最终大小的内容。我希望每个孩子都是其父母的1/3，而不管其内容如何。
这是小提琴：
下面是HTML：
<div class="parent">
<div class="child red">
<div class="content">1</div>
</div&g
浏览 4提问于2015-07-27得票数 3
回答已采纳
2回答
我有一个问题:当屏幕大小合适时(在本例中，低于768‘t)，则不应用媒体查询。
以下是我的元素：
<div class="container d-flex flex-column flex-md-row ">
...
</div>
以下是课程：
@media (min-width: 768px) {
.flex-md-row {
flex-direction: row;
}
}
.flex-column {
flex-direction: column;
}
根据Chrome Webdev工具，它们是如何应
浏览 4提问于2022-05-01得票数 1
1回答
我正试图用30 by，.card-info将我的.button-cont元素集中并锚定在它的容器底部。
我尝试过将.card-info设置为flex-direction: column和align-items/align-content: flex-end、margin-top: 0方法和绝对定位，但都没有工作。
我刚开始使用flexbox，构建了一个嵌套的布局，所以很难做到。
注意:我给了.card一个固定的高度来模拟我的应用程序的行为，这是通过jQuery动态发生的。我认为这是挑战的一部分。
.events-row {
display: flex;
justify-conten
浏览 1提问于2017-01-26得票数 1
回答已采纳
1回答
我正在尝试将排序图标实现到我的React表中，但是排序图标会被推到标头下面。
这个问题是由于使用了textAlign："right"，在代码中可以看到：
{
Header: () => (
<div style={{ textAlign: "right" }}>Market Cap</div>
),
id: 'market_cap',
accessor: d => (
<div className="center th-align-right">
{formatDo
浏览 2提问于2021-10-24得票数 0
我有一个装有display: flex和flex-direction: row的容器。
在那个容器中有一个子容器，它也带有display: flex，但是有flex-direction: column。
问题是，如果我在子容器中添加一个输入，则该输入的min-width将被忽略。
这是我在flexbox中尝试了几种输入情况的代码：
form {
margin: 100px;
}
div.flex_ctn {
display: flex;
}
input {
flex: 1;
min-width: 40px;
}
div.column {
flex-direction:
浏览 2提问于2016-11-03得票数 4
回答已采纳
4回答
我在一个包含display: flex和flex-direction: column的父类中有多个子类。
页面上有一个切换控件，它将删除其中一个子项。
如果删除任何子项，我希望表高度占用所有剩余空间。
.parent {
border: black 1px solid;
height: 260px;
display: flex;
flex-direction: column;
}
.child {
padding: 5px;
}
#table {
display: table;
height: 160px;
}
.tr {
display: table
浏览 0提问于2020-05-08得票数 1
不知道该怎么命名，所以如果它让人困惑的话，很抱歉。基本上，我正在创建一个选项卡模块，其中.right div始终是相同的高度。
.left div包含链接/选项卡，但我希望这个div的高度与.right不匹配。
例如，在下面的方法中，我希望带有文本"Content“的div是自动的(匹配文本高度)。
方法：
.parent {
display: flex;
flex-direction: column;
}
.flex-row{
display: flex;
flex-direction: row;
}
.left,
.right {
flex-basis:
浏览 0提问于2019-08-19得票数 0
我试图让一个flex框的多个子元素增长，以填充max-height参数在flex-direction: column时设置的可用高度。这可以直观地与max-width和flex-direction: row一起工作，当我在指定的最大宽度内调整浏览器大小时，允许元素再流。下面是一些简单的html，考虑到我对flex-box的理解，它应该能工作：
.child {
background: rgb(255, 255, 255);
border: 1px solid #999;
font-weight: bold;
text-align: center;
flex-basis:
浏览 2提问于2020-07-27得票数 2
回答已采纳
1回答
我有这样的设置，在这个设置中，我需要表单、按钮和选择框来水平地占据所有可用空间。在小屏幕上，所有的工作都是按预期进行的。
然而，当我在更大的屏幕中测试它时，所有的空间都没有被子元素填充。
我尝试了网格和flex->row两种方法，结果是相同的。如何修正我的代码，即使在更大的大小子元素填充所有可用的空间水平与它们之间的相等空间？
.grand-parent {
margin-top: 2%;
left: 0%;
position: relative;
display: flex;
flex-direction: row;
}
.parent {
m
浏览 3提问于2022-07-22得票数 1
回答已采纳
考虑到使用flexbox的一些非常基本的html，我可以使用一个页眉、页脚和一个内容区域来实现一个屏幕，它可以填充所有的空格：
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;fle
浏览 3提问于2017-09-26得票数 1
回答已采纳
2回答
我有一行和两列(本例中有一列为flex )。我希望将行的高度设置为最高子元素的高度。在没有显式设置行高度的情况下，我在这样做时遇到了问题。
.row {
background: yellow;
}
.column1 {
float: left;
width: 50%;
}
.column2 {
float: left;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: aqua;
}
浏览 0提问于2018-05-14得票数 2
回答已采纳
1回答
我正在和Octave一起做一个学校项目，用来计算和绘制速度/加速度图。
我一直在尝试创建一个子图函数，这样我就不必为每个子图都硬核它了
subplot(3, 1, 1);
plot(time, accn);
grid;
title('Acceleration vs Time')
xlabel('Time, (s)')
ylabel('Acceleration, (m/s^2)')
subplot(3, 1, 2);
plot(time, velocity);
grid;
title('Velocity vs Time');
xl
浏览 0提问于2018-09-21得票数 0
1回答
我想为我的网站做一个模板，我制作了2列菜单和一个大盒子在中心作为主要职位。我将使用淡入javascript在菜单之间切换。
现在我想让它响应如下:就像现在在桌面浏览器上，当用户打开这个站点时，列是bog框顶部和底部的一行。
.areaborder{
width:80%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.angry-grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1f
浏览 2提问于2022-01-23得票数 0
1回答
我试图创建一个基于黄金比率(1:1.618)的响应性布局，我希望它是无限递归的。
我知道，它永远不会在这么深的层之后使用，但是我开始纠结于这样一个事实:我不知道如何使它无限递归！
下面是：
* { box-sizing: border-box; }
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/**
*
* GOLDEN RATIO LAYOUT
*
**/
/**
* Default l
浏览 1提问于2019-02-07得票数 4
回答已采纳
2回答
我一直在尝试在一个名为React的"mad-libs“风格的应用中排列一些组件，但我遇到了一些困难。这是一张显示情况的图像，其中的箭头显示了所需的结果。我的flexbox代码已关闭，或者我的Material UI文本字段的样式设置错误。 ? 我曾使用Flexbox将两个组件排列在一起，但现在我很难重新定位它们以使其匹配。这是我的React代码：(显示一个数组，该数组存储了一个填充了常规文本并需要输入的故事) return(<div className = "storyContainer">
{storyList.map((regu
浏览 43提问于2020-11-20得票数 2
回答已采纳
这是截图：
我要右边的侧边栏伸展页脚。这是我的标记：
<header>
Fixed position header
</header>
<main>
<article>
<form method="post" class="row">
<div class="col-l-2 padding-20">
Table here
</div>
浏览 2提问于2015-08-29得票数 0
回答已采纳
1回答
我想包装Column 2在顶部，因为它将包含一个封面图像。下面有一个HTML示例
* {
box-sizing: border-box;
}
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two equal columns */
.column {
flex: 50%;
padding: 20px;
}
/* On screens that are 600px wide or less, make the columns stack on top o
浏览 3提问于2022-05-13得票数 0
回答已采纳
1回答
我知道这已经回答了，但我不能得到我的形象来替代。我正在使用Vuetify，但覆盖了某些样式，所以我认为这可能与它有关。
我尝试过使用flex-flow: row-reverse;和float: right/left，但都没有成功。
有人能看到我遗漏的一个明显的错误吗？
<template>
<v-card class="mx-auto mt-5 posts-list-item" outlined>
<v-container class="posts-list-item__content">
<v-
浏览 7提问于2020-02-22得票数 0
回答已采纳
我有以下的工作布局。我想要一个垂直滚动条只为.gallery-items元素。布局不应溢出.split-panel容器。 偶然间，我发现向.pane-2添加flex-direction: column会破坏布局。 所以，问题是为什么会发生这种情况？ 据我所知，如果只有一个子元素，flex-direction: row和flex-direction: column应该没有区别。 body {
margin: 0;
}
.split-panel {
height: 100vh;
display: flex;
flex-direction: column;
}
.pane-
浏览 28提问于2021-01-16得票数 0
回答已采纳
我使用React.js + next.js +样式组件来开发一个应用程序的前端。在我的布局文件中，我有一个包装器，使另外两个div (LeftContainer和RightContainer)并排在一起，但是没有一个div占据页面高度的100%。我附加了布局类和下面的样式。
export default function Layout({ children }) {
return (
<>
<Wrapper>
<LeftContainer>
a
浏览 6提问于2021-03-11得票数 0
回答已采纳
1回答
在使用flex和flex-basis时，我看到HTML元素发生了两种不同的情况。下面的第二个示例(使用flex-basis & flex )与第一个示例(仅使用flex )有何不同？
.row {
display: flex;
flex-flow: row wrap;
flex: 1 1 100%; //Three values for flex: flex-grow | flex-shrink | flex-basis
}
VS
.col {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex
浏览 2提问于2020-12-15得票数 1
回答已采纳
我试着做一些类似的事情：
其中“项目标题”以A的总高度为中心。
我正在使用flex在project-description之上设置一个project-description：
.headline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="column headline row__twenty">
<div class="project-description">
&l
浏览 2提问于2017-11-19得票数 1
回答已采纳
我使用两个框架将我的主帧组织成两个子帧。一个子帧是左边的一个，它包含几个按钮和一个标签。右边的子框架包含一个treeview。
left_frame中的项在我使用参数row=0，column=0时不显示，如下面的示例所示。
class MainFrame(ttk.Frame):
def __init__(self, container):
super().__init__(container)
# containers
self.left_frame = ttk.Frame() # contains all the buttons an
浏览 6提问于2022-11-27得票数 0
回答已采纳
我刚开始使用flexbox，但是我有一个包含三个子div的父div。这三个子div都是100%宽的。前两个div是一个固定的高度。我要第三个孩子填上其余的家长。
* {
margin: 0;
}
.flex-container {
display: flex;
height: 300px;
flex-wrap: wrap;
border: 1px solid blue;
background-color: gray;
align-content: flex-start;
}
.flex-item1 {
width: 100%;
height: 10p
浏览 1提问于2017-03-27得票数 0
回答已采纳
我知道我可能没有很好地解释标题中的问题。
因此，我正在编写样式表，其中有两个自定义元素( <grid>和<box>)，它们是柔性盒，在flex-direction中是备用的，如下所示：
<box> <!-- flex-direction: column -->
<grid> <!-- flex-direction: row -->
<box></box> <!-- flex-direction: column -->
浏览 0提问于2020-11-06得票数 0
1回答
请考虑以下示例：
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #C0C0C0;
background-color: #202020;
display: flex;
flex-direction: column;
align-items: center;
}
* {
box-sizing: border-box;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: fle
浏览 1提问于2021-08-24得票数 2
回答已采纳
我有一个具有类.primary和flex-flow: column nowrap;的父元素，它可以增长全宽；
然后我用类.aaa设置了一个子元素，它应用了一个flex-flow: row nowrap;，并将growth设置为0，收缩为1，并将flex basis设置为10rem；
但是，尽管它有flex-flow: row nowrap;，但flex-basis被应用于y-axis，而不是x-axis。为什么？
.primary {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
background: g
浏览 5提问于2017-07-14得票数 1
回答已采纳
3回答
我有一些框架生成的HTML，我正在尝试样式。
.row {
display: flex;
flex-direction: row;
}
.field {
display: flex;
flex-direction: column;
}
<div class="row">
<div class="field">
<label>Label</label>
<input type="text">
</div>
<div cla
浏览 12提问于2022-09-29得票数 0
回答已采纳
2回答
我正在创建一个jQuery，通过删除以下所有额外的行和列来优化表结构：
( a)包含小于2个子元素的
( b)包含重复容器(.column不能有子.column，.row不能有子.row)
我仍然没有让它工作，它运行了6个步骤(在评论中可见)。
将#example转换为#solution所必需的
var selection;
//1. Select all rows and columns
selection = $('#example').find('.row, .column');
//2. Deselect rows and colum
浏览 1提问于2016-03-08得票数 1
有一个弯曲方向的挠曲容器:行。每一列都是具有弯曲方向的挠性容器:列。
在flex行中有一些表单输入，但是当我尝试给出位置时，选择一个初始的flex: 250px，它不工作，它垂直地应用它。
但是，我找不到办法让它水平地应用。
<div class="row">
<div class="column input-container location">
<label for="location">Location</label>
浏览 0提问于2018-10-07得票数 0
回答已采纳
2回答
我创建了一个包含两个列的flex行，每个列都有flex:1，这意味着这些列将除以两个宽度相等的部分。
HTML :
<div class="row">
<div class="columnLeft">
<p>columnLeft</p>
</div>
<div class="columnRight">
<p>columnRight</p>
</div>
CSS :
.row {
display: flex;
flex-dir
浏览 1提问于2021-09-27得票数 0
回答已采纳
1回答
Sass为我编译了一个巨大的文件，它可以更小！我没有在编译器设置中找到任何东西！最有可能的是编译器的问题。也许问题是我的代码。
我的scss文件：
@mixin flex {
display: flex;
dynamic- { flex: 1 1 }
shrink- { flex: 0 1 }
fixed- { flex: 0 0 }
grow- { flex: 0 1 }
}
column- {
@include flex;
flex-direction: column;
}
row- {
@include flex;
flex-directi
浏览 1提问于2022-09-01得票数 0
回答已采纳
我是SQLAlchemy新手。
我正在尝试定义一个表示表数据子集的模型子类。具体地说，我希望子类映射给定ID的最新行。
例如，假设我有以下模型：
class AddressHistory(Base):
__table__ = 'address_table'
date = Column(Date, index=True, nullable=False)
id = Column(BigInteger, primary_key=True)
street = Column(String(2000))
city = Column(String(2
浏览 2提问于2014-08-08得票数 7
以下是警告：
Warning: Failed prop type: Invalid prop `children` supplied to Row
我已经编写了一个有行和列的网格组件。
行可以接受children，我正在尝试用PropTypes设置它。
到目前为止，我得到了：
Row.propTypes = {
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
gap: PropTypes.number,
children: PropTypes.oneOfType([
PropTypes.ele
浏览 0提问于2018-05-14得票数 0
1回答
我有一个容器，它有一个表和一个div，其中display设置为flex，flex-direction设置为column。
我想使div中心水平对齐。这是代码
<style>
.container {
display: flex;
flex-direction: column;
border: 1px solid red;
}
.mytable {
width: 100%
}
table,
th,
td {
border: 1px solid b
浏览 0提问于2018-04-11得票数 5
1回答
iPad上的挠性柱折叠
、、、
这个问题以前已经提过很多次了，但是flex模型已经发生了很大的变化，我仍然无法找到一个可行的解决方案。
问题
当对象的flex方向设置为列时，所有对象的高度都会折叠(即高度:0)。
问题似乎仅限于iProducts。据我所知，Flex在桌面和android的所有浏览器上都能正常工作。
这个问题并不局限于Safari，因为在iPad上测试时，Chrome和Firefox上都存在这个问题(IOS 10.3.3)。
这个例子说明了这个问题。当宽度小于600 to时，行切换到列，就会出现问题。
.InputRow,
.InputItem,
.InputWrap {
disp
浏览 0提问于2017-09-14得票数 1
1回答
我正在使用CSS，我创建的网格遇到了一些麻烦。我遇到的问题是，当右列展开时，它会将下一行的内容向下推到左边。例如，您可以看到橙色(描述)和蓝色(图像)之间有很大的间隔，因为绿色框(右上)。理想情况下，我希望右边的柱子能够向下推，同时保持橙色对蓝色。
我已经考虑过不同的方法--我可以用不同的方式来使这个工作更好，其中之一是移动description，所以它是image的一个子级，所以它与它保持在同一行，但问题是我需要能够改变不同断点上的这些项目的顺序，在较小的屏幕上，我希望橙色总是在底部，而移动标记会导致它接近顶部。实际上，网格需要像现在这样灵活，我只需要删除上面屏幕截图中的空白。
下
浏览 4提问于2022-10-14得票数 0
回答已采纳
1回答
.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
margin: 0;
text-align: center;
height:200px;
}
#story {
text-align: center;
display: flex;
flex-direction: column;
padding:0;
justify-content: space-between;
}
.row {
display: flex;
}
html, body,
浏览 3提问于2017-02-20得票数 1
回答已采纳
div容器正在破坏我的页面。它正在覆盖其他地方使用的容器。还有什么其他的选择，我可以使用，仍然有相同的效果，即div列坐在每一个，但在不同的屏幕分辨率，它们堆叠在一起，并保持相同的宽度和长度，因为他们缩小？
如何创建两个响应性div，它们彼此相邻，并以不同的屏幕大小叠加在一起？尺寸是具体的(每个div是350 x 217 px)。
一个div将有一个文本中心水平在div内，但也左对齐，另一个将是一个图像。
以下是理想的最终结果。我是一个新手开发，这是一个任务，已经过期了。在过去的几天里，我一直在兜圈子，不停地兜圈子。
较小屏幕上的响应视图：
* {
box-si
浏览 2提问于2022-08-25得票数 0
我正试着在ReactJs中做一些类似手风琴的事情。现在我有3个组件：<TableList>、<TableListGroupRow>、<TableListRow>
在List render方法中，我将GroupRows和行推入一个数组，然后再呈现该数组。
//one group row for example
var group;
tableRows.push(
group =
<TableListGroupRow
onClick={
浏览 0提问于2016-07-01得票数 2
3回答
我有一个包含多个子元素的框架，这些子元素是使用grid()几何管理器放置在其中的。
如何修改下面的代码以使框架响应？
content.grid(column=0, row=0, sticky='nwse')
userButt.grid(column=2, row=1, sticky='nwse')
favoButt.grid(column=3, row=1, sticky='nwse')
locaButt.grid(column=4, row=1, sticky='nwse')
histScal.grid(column=5, ro
浏览 0提问于2017-10-02得票数 2
回答已采纳
这是我的代码，它使用的是使用的车辆平台- HTML和flex，但并不是非常令人满意：
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top:
浏览 1提问于2021-07-24得票数 0
回答已采纳
2回答
根据Gang of Four的设计模式，单例类可以有一个子类。
单例类的子类必须是单例类吗？
一个单例类可以有任意数量的子类吗？
谢谢。
浏览 6提问于2017-09-29得票数 0
如何在flex计算之外，将第一个孩子定位在flex父级下，并根据需要设置它的位置？
.mycontainer{
background-color:
rgb(200,200,200);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.mycontainer-bar{
width: 20px;
heigh
浏览 1提问于2022-06-21得票数 1
回答已采纳
我使用flexbox来让我的页脚留在底部，只有当内容比视区短的时候。如果它比较高，页脚应该留在内容下面，这样你就必须滚动才能看到它。
这在Firefox和Edge中可以正常工作，但在Chrome或IE中无法正常工作。
在Chrome中，正如您将看到的，使视区比内容短会使页脚“粘”在视区的底部。如果您随后滚动，您将看到页脚向上滚动页面。
我认为问题出在contentContainer中：
#contentContainer {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width:
浏览 0提问于2016-10-18得票数 2
2回答
我正在尝试扩展iframe的大小，以填充我的web应用程序中的剩余空间。我知道已经为div分配了最大空间(通过添加边框)，但是iframe高度本身并没有扩展到填充整个垂直高度。
问题是，row content iframe没有填满整个垂直空间，即使flexbox适当地分配了该空间。
有什么想法吗？
.box {
display: flex;
flex-flow: column;
height: 100vh;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box
浏览 0提问于2015-10-22得票数 17
1回答
我试图垂直对齐包装器的子DIV，但不幸的是没有。要求是屏幕包装的全宽度和高度，两个子DIV垂直和水平中心。( jQuery正在处理div的高度以使窗口高度)
注：我不想让孩子变成DIV width:100%
这就是我尝试过的：
.wrapper {
width: 100%;
height:100%;
min-height:600px; /*just for example*/
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background:#e1
浏览 3提问于2017-03-12得票数 8
回答已采纳
2回答
你好，我有2个灵活的项目，这是包装在一个容器中。我希望包含按钮的div放在父div的底部，但在demo中，div被放在兄弟的旁边，这使得底部位置未使用。
<div style="display:flex;flex-direction:row">
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div>1</div>
<div>1</div>
浏览 37提问于2016-08-03得票数 2
回答已采纳
3回答
如何避免flex列中的项伸长到全宽度？我希望它是原始大小的创造。
.myForm {
display: flex;
flex-direction: column;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>
浏览 5提问于2021-12-07得票数 0
回答已采纳
1回答
我有使用flex的div容器。我的弹性儿童容器里有一个大胆的衰老。
示例
Lorem ipsum dolor与之同坐，是一种非常重要的植物。在卵黄中有一种新的特征。诺兰的前庭奥西。
然而，当我创建我的flex容器时，它并没有将粗体文本内联。它在普通文本和粗体文本之间创建一个块。
示例
Lorem ipsum dolor
同坐，圣洁的精灵。在卵黄中有一种新的特征。诺兰的前庭奥西。
我已经将我的flex容器设置如下：
.flexparent { display: flex; flex-direction: row; justifty-content: center; flex-wr
浏览 4提问于2016-09-01得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
