Question

我想通过以下方式安排 flex-items ：

Layout

使用以下示例：

.Container {
  display: flex;
  overflow: hidden;
  height: 100vh;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
  width: 70vw;
}

<div class="Top">Top Content</div>
<div class="Container">
  <div class="Left">Left Content</div>
  <div class="Middle">Middle Content</div>
  <div class="Right">Right Content</div>
</div>

我可以做到，因此在其下方有一个水平条和一个垂直列。但是，我无法弄清楚如何使另一个垂直列；一个由上面的代码组成，另一个由不同的div组成。

谢谢！

Answer 1

您可以使用flex。对于每个“方向”，请使用一个容器。要除以1：2的比率，请使用flex-grow: 1和flex-grow: 2;。

使用

也很重要

flex-shrink: 0;
flex-basis: 0;

如果您希望保持该比例而不管其中的内容如何，否则浏览器将根据其中的内容调整div的大小。

有一种写所有3种方法的较短方法：

flex: [flex-grow], [flex-shrink], [flex-basis];

但是IE不支持它，所以我更喜欢使用长距离

.out-container {
  display: flex;
  flex-direction: row;
}

.inner-cont {
  display: flex;
  flex-direction: row;
  flex-grow: 2;
}

.container {
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 70vw;
}

.left,
.right,
.middle,
.top {
  padding: 10px;
  border: 1px solid black;
}

.left {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  background-color: #aaeffe;
}

.top {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #69e2fd;
}

.middle{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #38d0fd;
}

.right{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #1fbbfb;
}

<div class="out-container">
  <div class="left">Left Content</div>
  <div class="container">
    <div class="top">Top content</div>
    <div class="inner-cont">
      <div class="middle">Middle Content</div>
      <div class="right">Right Content</div>
    </div>
  </div>
</div>

Answer 2

import 'package:flutter/material.dart';
import 'dart:async';

void main(){
   runApp(new MaterialApp(
  home: new MyApp(),
 ));
 }


 class bloc {

  StreamController <int> ctrl = StreamController() ;
  get blocvalue => ctrl.stream;   
  void setvalue (value ) {
       ctrl.sink.add(value) ; }
 }

 class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
  }

 class _State extends State<MyApp>{



 @override
  Widget build(BuildContext context) {
    return new Scaffold(
    appBar: new AppBar(
      title: new Text('Name here'),
    ),

    body: new Container(
      padding: new EdgeInsets.all(15.0),
      child: new Center(
      child: new Column(
        children: <Widget>[
          StreamBuilder(
              stream: bloc().blocvalue,
              initialData: 0,
              builder: (BuildContext context, AsyncSnapshot <int> snapshot) 
       {
                List<Widget> list = new List<Widget>();
                for(int i = 0; i < 3; i++){
                  list.add(new RadioListTile(
                    value: i,
                    groupValue: snapshot.data,
                    onChanged: bloc().setvalue,
                    activeColor: Colors.green,
                    controlAffinity: ListTileControlAffinity.trailing,
                    title: new Text('Item: ${i}'),
                    dense: true,
                    //    subtitle: new Text('sub title'),
                  ));

                }
                return Column(children: list,); })
         ],
        ),
      ),
     ),
    );
   }
   }

以特定方式安排弹性项目

2 个答案: