Ant-design: عناصر ارتفاع متساوية

لا أفهم ， ماذا يعني a lot of layout issues ؟

ارتفاع الصف === الحد الأقصى (ارتفاع العمود) لذلك لن يؤدي إلى حدوث مشكلات في التخطيط. https://codesandbox.io/s/my8p6vk7wj

أعني إضافة ميزة لجعل الأعمدة (والعناصر الأخرى) متساوية في الارتفاعات داخل الصف.

يبدو المثال الخاص بك حاليًا كما يلي:

ولكن سيكون من الجيد إضافة <Row equal-heights> وسيظهر المحتوى على النحو التالي:

أرى ... يبدو معقولاً.

ربما استدعاء vertical-fill أفضل؟

لا أعتقد أننا بحاجة إلى هذا ، يجب أن يترك ارتفاع الأطفال محتوى الأطفال أو أسلوبه.

@ yutingzhao1991 @ ddcat1115 أواجه نفس المشكلات. هل لديك حل لذلك؟

أي قرار بشأن هذه المسألة؟

لا

استخدام الصفوف الممكّنة من Flexbox مع النوع = "flex" وضبط الارتفاع إلى 100٪ في محتويات العمود كان مفيدًا بالنسبة لي.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

شكرا ألفين. إنه يعمل بالنسبة لي لضبط type = 'flux'. لكن لا تنس ضبط الارتفاع على 100٪ في محتويات العمود أيضًا. ليس العمود نفسه ، يجب أن يكون المكون الموجود أسفل العمود.

لدي بطاقات في شبكتي. يعمل تعيين نوع الصف على "التدفق" وارتفاع البطاقة إلى "100٪" (كما هو مقترح في هذا الموضوع) بشكل مثالي بمعنى أن كل بطاقة تملأ الارتفاع الكامل للصف. ومع ذلك ، لم يعد شريط إجراءات البطاقة موجودًا في أسفل الصف. تبدو هكذا:

كيف يمكنني الحصول على بطاقات في شبكة تتوسع إلى ارتفاع الصف ، ومع وجود أزرار إجراءات البطاقة في أسفل الصف؟

في Meta tag ، يمكنك إضافة فئة وتحديد ارتفاعك الثابت. يحب

<Card>
 <Meta  
  className="cardBodyStyle"
  title={key.title}
  description={key.description}
 />
</Card>

css:

.cardBodyStyle {
    height: 100px;
}

استخدام الصفوف الممكّنة من Flexbox مع النوع = "flex" وضبط الارتفاع إلى 100٪ في محتويات العمود كان مفيدًا بالنسبة لي.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

هذا هو الطريق الصحيح

جرب هذا الأسلوب لتمديد العقدة الفرعية إلى كل المساحة المتاحة (عموديًا وأفقيًا)

<Row gutter={16}>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2<br/>3
        </Card>
    </Col>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2
        </Card>
    </Col>
</Row>

بالنسبة لي ، لم يكن أي من هؤلاء يعمل. كان الحل هو إزالة height: 100% وتعيين display: inline-flex و align-self: stretch على علامات Col. إذا كان لديك عناصر متعددة داخل Col ، فستحتاج إلى لفها داخل حاوية أخرى بحيث يكون للعناصر طفل واحد فقط.