Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/sockets/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 弯曲方向的神秘行为:列_Css_Flexbox - Fatal编程技术网

Css 弯曲方向的神秘行为:列

Css 弯曲方向的神秘行为:列,css,flexbox,Css,Flexbox,当我编写这样的代码时,我知道文本不会中断 .a{ 显示器:flex; 边框:1px纯黄色; } .b{ 边框:1px纯绿色; 溢出包装:断开单词; } 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 您只需要给div.b一个明确的宽度,否则元素将展开以适应内容。使用您的代码,这非常简单: .a{ 显示器:flex; 弯曲方向:立柱; 边框:1px纯黄色; 对齐项目:开始; } .b{ 边框:1px纯绿色; 溢出包

当我编写这样的代码时,我知道文本不会中断

.a{
显示器:flex;
边框:1px纯黄色;
}
.b{
边框:1px纯绿色;
溢出包装:断开单词;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

您只需要给div
.b
一个明确的宽度,否则元素将展开以适应内容。使用您的代码,这非常简单:

.a{
显示器:flex;
弯曲方向:立柱;
边框:1px纯黄色;
对齐项目:开始;
}
.b{
边框:1px纯绿色;
溢出包装:断开单词;
//最小宽度:0;
宽度:100%;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

您只需要给div
.b
一个明确的宽度,否则元素将展开以适应内容。使用您的代码,这非常简单:

.a{
显示器:flex;
弯曲方向:立柱;
边框:1px纯黄色;
对齐项目:开始;
}
.b{
边框:1px纯绿色;
溢出包装:断开单词;
//最小宽度:0;
宽度:100%;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

对于
弹性方向:行
主轴是水平的,横轴是垂直的。
对于
flex-direction:column
它们进行切换,以便主轴是垂直的,横轴是水平的,您知道

现在让我提醒你
justify content
flex-grow
flex-short
flex-basis
属性在主轴上工作
对齐项目
横轴上工作

设置
align items:start
时,您将覆盖默认的
align items:stretch
,并且
flex item
可以采用任何大于
min width
width
(因为既没有指定
width
也没有指定
max width

要实现所需的行为,只需删除
对齐项:start

最小宽度:0
也可以安全删除,因为它不起任何作用

请参见下面的代码段:

.a{
显示器:flex;
弯曲方向:立柱;
边框:1px纯黄色;
/*对齐项目:开始;让我们使用默认值*/
}
.b{
边框:1px纯绿色;
溢出包装:断开单词;
/*最小宽度:0;这不起任何作用*/
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

对于
弹性方向:行
主轴是水平的,横轴是垂直的。
对于
flex-direction:column
它们进行切换,以便主轴是垂直的,横轴是水平的,您知道

现在让我提醒你
justify content
flex-grow
flex-short
flex-basis
属性在主轴上工作
对齐项目
横轴上工作

设置
align items:start
时,您将覆盖默认的
align items:stretch
,并且
flex item
可以采用任何大于
min width
width
(因为既没有指定
width
也没有指定
max width

要实现所需的行为,只需删除
对齐项:start

最小宽度:0
也可以安全删除,因为它不起任何作用

请参见下面的代码段:

.a{
显示器:flex;
弯曲方向:立柱;
边框:1px纯黄色;
/*对齐项目:开始;让我们使用默认值*/
}
.b{
边框:1px纯绿色;
溢出包装:断开单词;
/*最小宽度:0;这不起任何作用*/
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

您希望最小宽度为0的
有什么行为?你基本上是说没有最小宽度(这意味着文本可以按它想要的宽度移动)。另外,当您描述溢出时,您希望/期望发生什么?您是否试图控制最大宽度?还是溢出?我希望实现与在flex-direction:row中指定最小宽度相同的行为。我添加了代码。您仍然没有描述所需的行为。我认为您对min width的意图有误解,因此如果您能描述所需的效果,那就太好了。我重复一遍,你所描述的听起来像是你想要最大宽度。指定
max width
,`width`作为一个弹性项实现了我想要的行为。但我想知道为什么在“弹性方向:行”中起作用的
min-width:0
flex-direction:column
中不起作用。您缺少一点:
min-width
在这种情况下不起作用。将其取出,结果将与
最小宽度:0时的预期行为相同?你基本上是说没有最小宽度(这意味着文本可以按它想要的宽度移动)。另外,当您描述溢出时,您希望/期望发生什么?您是否试图控制最大宽度?还是溢出?我希望实现与在flex-direction:row中指定最小宽度相同的行为。我添加了代码。您仍然没有描述所需的行为。我