标签: flexbox

我有 3 个弹性项目：页眉、内容和页脚。我希望一切都可以弯曲，但标题正好是 250 像素...我添加了一个样式，.height-250 {max-height: 250px;}但它不起作用。

/* GRID */
.grid {
  display: flex;
}
.col {
  background-color: rgba(100, 255, 255, 0.1);
  border: 1px solid rgb(100, 255, 225);
  padding: 5px;
}
.col-1-12 {
  flex-basis: 8.3333%;
}
.col-2-12 {
  flex-basis: 16.6666%;
}
.flex-column {
  flex-direction: column;
}
.full-width {
  flex-grow: 100;
}
.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.height-250 {
  max-height: 250px;
}

<div class="wrapper grid flex-column">
  <div class="col …

我在的容器中有6张图像display: flex，因此容器的宽度除以6张图像。

我想显示2张图像和第3张图像的一部分，而其他3张图像则在右侧，但直到用户向右滚动时才显示。

我隐藏了水平滚动条，但我想保留滚动功能，但是如该小提琴所示，显示了6张图像。

如何仅显示2张图像和3张图像的一部分，而其他3张图像隐藏在前3张图像的右侧？

这是代码：

.images {
  margin-bottom: 20px;
  border-bottom: 1px solid #dae2e4;
  padding-bottom: 20px;
}

.images__gallery {
  display: -webkit-box;
  display: flex;
  padding-right: 5px;
  margin: -3px;
  overflow-y: hidden;
  overflow-x: scroll;
  margin-bottom: -50px;
  padding-bottom: 50px;
}

.images__gallery-item {
  /*overflow: hidden;*/
  position: relative;
  padding: 1%;
  flex-basis: 32%;
  height: 25vw;
  margin: 3px;
  border: 1px solid #dae2e4;
}

.images__gallery-item img {
  position: absolute;
  left: -1000%;
  right: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%; …

StackBlitz（实时演示）

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="10px">
  <mat-card *ngFor="let o of cards">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{o.title}}</mat-card-title>
      <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
    <mat-card-content>
      <p>
        {{o.content}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

在cards组件上的哪里定义为：

// const url = 'https://material.angular.io/assets/img/examples/shiba2.jpg';
cards: {title: string, subtitle: string, content: string, url: string}[] = [
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content …

我仍在学习React Native，尤其是flexbox。所以我有一个TouchableOpacity，上面有一些子组件，像这样：

问题是我无法将箭头图标移到TouchableOpacity的右中间。我尝试 justifyContent: 'center', alignItems: 'flex-end'但没有任何反应。这是我的代码：

<TouchableOpacity onPress={this.onRowPress}>
<View style={{ padding: 5 }}>
    <CardSection style={{ flex: 1 }}>
        <Icons name="monitor" size={50} style={{ paddingLeft: 10 }} />
        <View style={{ flexDirection: 'column' }}>
            <Text style={styles.channelStyle}>
                {item.nama}
            </Text>
            <Text
                style={
                    [item.status === 'Online' ? onlineTextStyle : offlineTextStyle]
                }
            >
                {item.status}
            </Text>
        </View>
        <Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />
    </CardSection>
</View>
</TouchableOpacity>

这是样式：

const styles = {
channelStyle: {
    fontSize: 25,
    paddingLeft: 30
},
onlineTextStyle: {
    paddingLeft: 30,
    color: 'green'
},
offlineTextStyle: { …

我有多个无序列表,具有不同数量的元素和列标题,其中包含不同数量的文本.

我正在使用flexbox水平对齐它们,但我正在努力使列彼此对齐.

当前问题: 期望的结果:

编辑:需要注意的是列标题类是可选的,可以删除,以便该项只是一个普通的列表项.

激活列标题后,我需要列标题以匹配列标题li的高度与最多文本.我让flexbox工作以水平对齐列表,但列没有排列.

这是JsFiddle:(https://jsfiddle.net/xk04m7g1/)

.column-stack {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 30px
}

.column-stack ul {
  -ms-flex: none;
  flex: none;
  width: calc(33.333% - 10px);
}

.column-stack ul .column-header {
  font-size: 12px;
  text-transform: uppercase;
  color: #006a4d;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 1px solid #3a3a3a;
  display: flex;
  align-items: stretch;
  /* Default */
  justify-content: space-between;
}

<div class="column-stack">
  <ul>
    <li class="column-header">Header 1 One Line</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <ul> …

我有一个带有页脚的移动侧边栏，该页脚应固定在底部，但是当导航链接很多时，页脚将被向下推，您必须滚动才能看到它。

这是一个简化的演示，显示侧边栏已经扩展了内容。您会看到页脚粘在侧边栏的底部，而没有被多余的链接推下，滚动时它仍与链接重叠。

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a> …

Flex-end适用于chrome和firefox，但不适用于即浏览以下代码

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

I am trying to display on screen a green block for 1/4 of the screen and a yellow block for 3/4 of the screen using react.js I have the following code - but green block and yellow block has the same size.

MyComp.js:

import React from 'react';
import './MyComp.css'

export default class MyComp extends React.Component {
  render() {
    return (
      <div className="wrapp">
        <div className="greenBlock">
          <h1>green </h1>
        </div>
        <div className="yellowBlock">
          <h1>yellow </h1>
        </div>
      </div>
    );
  }
}

MyComp.css:

.wrapp,
html,
body …

I'm trying to place three divs using Flexbox.

I need to put the .site-title and .site-description divs on the left one under the other, and the .menu-toggle button on the right like below.

I tried with some variations of the following CSS code with no success.

.container {
  display: flex;
  justify-content: space-between;
}

.site-title {
  flex: 0 0 auto;
  align-self: flex-start;
}

.site-description {
  flex: 0 0 auto;
  align-self: flex-start;
}

.menu-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
} …

我试图在不压缩任何图像的情况下，将三个宽度不同的图像设为相同的高度。图像具有相同的高度。我真的被卡住了！任何帮助将非常感激。

这是jsfiddle

https://jsfiddle.net/5Lbuxawg/

<style>
.shopi {
        width:100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;}
.shopi img {
        width:auto; 
        height:100%; 
        }
.shopichild {width:100%;object-fit:contain;}
</style>
<body>


<div class="shopi">

<div class="shopichild "><img src="https://cdn.shopify.com/s/files/1/1640/3713/files/h1_400x.jpg"  alt="natural" /></div>

<div class="shopichild "><img src="https://cdn.shopify.com/s/files/1/1640/3713/files/h2_400x.jpg"  alt="natural" /></div>

<div class="shopichild "><img src="https://cdn.shopify.com/s/files/1/1640/3713/files/h3_600x.jpg" alt="natural" /></div>

</div>

谢谢