Question

我想用flexbox实现以下场景

绿色元素是文本元素，宽度是灵活的。蓝色元素应该具有绿色元素旁边剩余宽度的100％。

我目前的解决方案如下：

Option Explicit
Sub doit()
  ActiveCell = replaceCaps(ActiveCell)
End Sub

Function replaceCaps(ByRef S As String)
    Const sPat As String = "\b(?:A|M|CM|DM|MM|MG)\b"
    Dim RE As Object, MC As Object
    Dim I As Long

Set RE = CreateObject("vbscript.regexp")
With RE
    .Global = True
    .ignorecase = False
    .Pattern = sPat
    If .test(S) = True Then
        Set MC = .Execute(S)
        For I = MC.Count - 1 To 0 Step -1
            S = WorksheetFunction.Replace(S, MC(I).firstindex + 1, Len(MC(I)), LCase(MC(I)))
        Next I
        replaceCaps = S
    Else
        replaceCaps = S
    End If
End With      

End Function

和css：

<div class="container">
  <span class="title">title</span>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

但它看起来像这样这是一个codepen example

Answer 1

在不更改HTML的情况下，可以使用CSS-Grid作为替代来管理Flexbox。

＆＃13;

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 1em;
  background-color: #EAEBEF;
  margin-bottom: 1em;
}

.title {
  padding: 10px;
  grid-row: 2;
  background-color: #48CFAE;
}

.fullwidth {
  grid-column: 2;
  background-color: #87BDFF;
  height: 40px;
}

＆＃13;

<div class="container">
  <div class="title">title</div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

<div class="container">
  <div class="title">Longer title</div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

＆＃13;

Answer 2

试试这个HTML和CSS标记。基本上你需要将左侧保持在一个div中，将右侧元素保持在另一个div中。

＆＃13;

 
   .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #eaebef;
}
.container .title {
  padding: 20px;
  background-color: #48cfae;
}
.container .div1 {
  width: 20%;
}
.container .div2 {
  width: 80%;
}
.container .fullwidth {
  background-color: #87bdff;
  height: 60px;
  margin: 10px 0;
}

＆＃13;

<div class="container">
<div class="div1">
	<span class="title">title</span>
</div>
<div class="div2">
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
</div>
</div>

＆＃13;

Answer 3

请参阅以下代码：
您必须在fullwidth中变形div并将width设为此div
同时将width和margin设置为title

＆＃13;

.container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background-color: #EAEBEF;
}	
	.title {
		width: 20%;
		padding: 20px;
		background-color: #48CFAE;
        margin-left: 15px;

	}
	
	.fullwidth {
		background-color: #87BDFF;
		flex: 0 0 100%;
		height: 60px;
		margin: 10px 0;
	}
	.a{
		    margin: 50px;
		    width: 50%;
	}

＆＃13;

<div class="container">
	<span class="title">title</span>
	<div class="a">
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
	</div>
</div>

＆＃13;

Answer 4

如果你想在没有改变你的html的情况下实现这个目标，只需要少一点，试试这个：

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background-color: #EAEBEF;
    justify-content: flex-end;
    .title {
          padding: 20px;
          background-color: #48CFAE;
          margin-right: 20px;
          flex-grow: 1
    }
    .fullwidth {
          background-color: #87BDFF;
          height: 60px;
          margin: 10px 0;
          width: 80%;
    }
}

your codepen edited

flexbox项目剩余宽度的100％

4 个答案: