我正在尝试创建一个响应的正方形网格.应调整方块大小以适合视口的宽度.更改视口的高度时,方块不应调整大小.
我得到了如何调整每个方块的宽度,但我不知道如何使元素方形以及如何在视口宽度变化时缩放它们的高度.
在下方小提琴的示例中,七个方格应始终水平放置,并且它们应按比例缩放.我不在乎可见的行数.
在这里小提琴http://jsfiddle.net/gonyhvz8/11/
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div> …我正在尝试使用flexbox来构建一个大小相同的响应网格.如果单元格的内容相同,我的代码可以工作,但如果单元格的内容长度不同,则代码不起作用 - 单元格会重新调整以适应其内容.
这就是我所追求的:
1
.每个单元格宽度相同2.每个单元格的宽度在浏览器调整大小时自动调整.
这是我的小提琴代码:https://jsfiddle.net/v0erefnd/1/
HTML:
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">100</div>
<div class="flex-item">10,000</div>
<div class="flex-item">1,000,000</div>
<div class="flex-item">100,000,000</div>
<div class="flex-item">10,000,000,000</div>
<div class="flex-item">1,000,000,000,000</div>
</div>
<div class="flex-container">
<div class="flex-item">100</div>
<div class="flex-item">100</div>
<div class="flex-item">100</div>
<div class="flex-item">100</div>
<div class="flex-item">100</div>
<div class="flex-item">100</div>
<div class="flex-item">100</div>
</div>
CSS:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
height: 50px;
line-height:30px;
}
.flex-item {
/*todo: how to prevent the flexbox …我需要将标签绑定到一个复合值 - 由模型中的几个值组成。我正在尝试使用 ValueConverter 来执行此操作，但我无法弄清楚如何将对象本身传递给 ValueConverter。这是我的代码：在 XAML 中：
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp;assembly=MyApp"
x:Class="MyApp.SavedDetailsPage">
<ContentPage.Resources>
<ResourceDictionary>
<local:DetailsConverter x:Key="detailsCvt" />
</ResourceDictionary>
</ContentPage.Resources>
...
<Label Text="{Binding ???, Converter={StaticResource detailsCvt}}" FontSize="Small" TextColor="Gray" />
...
在 DetailsConverter.cs 中：
class DetailsConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
MyModel myModel = (MyModel)value;
return (myModel.FirstName + " " + myModel.LastName);
}
...
我尝试使用“。” 用于绑定到 self ，但这不起作用。
我通过向 MyModel 添加一个 .This 属性找到了一种解决方法，它可以访问对象本身，因此我可以在 XAML 绑定中传递“This”，但不确定这是否是最好的方法。
提前致谢！