Question

我希望在一个Flexbox中显示三个彼此相邻的框。外框为蓝色，内框为红色。红色框的最小宽度为228px，最大宽度为362px，宽度为100％。我想要的是仅当窗口的宽度小于或等于362px时才显示红色框（蓝色框不可见）。只有在宽度大于362px之后，我才希望蓝框平均展开，以便红框在中间保持固定的362px宽度。

我附上了一个我认为可以工作的样本，但是我观察到蓝色框和红色框都按比例增长，直到红色框为362px为止，此时只有蓝色框展开。

<div style="display: flex; width: 100%; flex-flow: row nowrap;">
  <div style="height: 80px; width: 100%; background-color: blue;
          flex-basis: auto; flex-grow: 0;"></div>
  <div style="height: 80px; min-width: 228px; max-width: 362px; width: 100%;
          background-color: red; flex-basis: auto; flex-grow: 1;"></div>
  <div style="height: 80px; width: 100%; background-color: blue;
          flex-basis: auto; flex-grow: 0;"></div>
</div>

Answer 1

从蓝色框中删除spec: progressDeadlineSeconds: 600 replicas: 1 revisionHistoryLimit: 2 selector: matchLabels: run: hello-minikube strategy: rollingUpdate: maxSurge: 25% maxUnavailable: 25% type: RollingUpdate template: metadata: creationTimestamp: null labels: run: hello-minikube spec: containers: - image: k8s.gcr.io/echoserver:1.10 <-- change to the right image imagePullPolicy: IfNotPresent <-- change to Always name: hello-minikube ports: - containerPort: 8080 protocol: TCP resources: {} terminationMessagePath: /dev/termination-log terminationMessagePolicy: File dnsPolicy: ClusterFirst restartPolicy: Always schedulerName: default-scheduler securityContext: {} terminationGracePeriodSeconds: 30 （罪魁祸首），然后向其中添加$ kubectl edit deployment hello-minikube，以便仅在有剩余空间时才展开：

width:100%

flex-grow:1

如何缩放具有最小和最大宽度的flexbox元素？

1 个答案: