我有一个
<div class="parent">
<div class="child" style="float:right"> Ignore parent? </div>
<div> another child </div>
</div>
父母有
.parent {
display: flex;
}
对于我的第一个孩子，我想简单地将项目浮动到右边。
我的其他div要遵循父级设置的flex规则。
这可能吗？
如果没有，我如何在flex下进行float: right？
答案 0 :(得分：82)
您无法在 Flex容器中使用float，原因是 float属性不适用于弹性级别容器，因为您可以见Fiddle。
因此，如果您想将child元素放在parent元素的右侧，可以使用margin-left: auto，但现在child元素也会将其他div推送到正如你在这里看到的那样Fiddle。
您现在可以做的是更改元素的顺序并在order: 2元素上设置child，这样它就不会影响第二个div
.parent {
display: flex;
}
.child {
margin-left: auto;
order: 2;
}<div class="parent">
<div class="child">Ignore parent?</div>
<div>another child</div>
</div>
答案 1 :(得分：12)
你不需要花车。事实上，它们是无用的，因为floats are ignored in flexbox。
您也不需要CSS定位。
有几种可用的flex方法。 auto margins已提及another answer。
以下是另外两个选项：
<?php
// Include above assets
require_once(__DIR__.'/config.php');
require_once(__DIR__.'/functions/myfunctions.php');
// This should run only on the ajax call
if(!empty($_POST['PSol'])) {
// Get the connection
$con = connection();
// Set common text
$disc = "<p>Disconnected from server: ".DB_HOST."</p>";
// Run the update
if(updateTable(1,$con))
// If success
$response = json_encode(array('msg'=>"Record successfully changed. {$disc}"));
else
// If fail
$response = json_encode(array('msg'=>"Error: {$sql}<br>".mysqli_error($con).$disc));
// Close connection
mysqli_close($con);
// Stop further processing of page
// If you don't stop processing, you will send back the rest of the
// page below and will malform your json
die($response);
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// This is an object to contain your ajax app
var AjaxEngine = function()
{
// Set some common containers
var url;
var useURL;
// This function will set where to point the ajax call
this.useUrl = function(url)
{
useURL = url;
return this;
}
// This is the actual jQuery ajax call
this.ajax = function(useData,func)
{
// Create jQuery ajax
$.ajax({
// Use our previously-set url
url: useURL,
// This is the data to send to our page
data: useData,
// Send the data by POST method
type: 'post',
// When the post is successful
success: function(response){
// Use an anonymous function
func(response);
}
});
}
}
$(".PSol").click(function(e) {
// Set the form
var thisForm = $('.PSolCanvas');
// Get the values from the form
var useData = thisForm.serialize();
// Stop from submission
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
// Create instance of our ajax object
var Ajaxer = new AjaxEngine();
// Set the url (in this case we are getting the action=""
// from the form tag)
// The "useData" param is the form data
// The second param is the function we want to run when
// the ajax successful
Ajaxer.useUrl(thisForm.attr('action')).ajax(useData,
function(response) {
// Try, just incase the code produces an error and
// malforms the json response
try {
// Parse the return json_encode()
var json = JSON.parse(response);
// Send the message to the container
$('#writespot').html(json.msg);
}
catch (Exception) {
// This will catch any error, so
// make sure your console is open to review
console.log(Exception.message);
console.log(response);
}
});
});
});
});
</script>
</head>
<body>
<!-- This is where the response message will be written to -->
<div id="writespot"></div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="PSolCanvas">
<input type="submit" name="PSol" value="P" class="PSol" />
<input type="hidden" name="PSol" value="P"/>
</form>
</body>
</html>
和justify-content: space-between属性。order并反转div的顺序。
justify-content: space-between.parent {
display: flex;
justify-content: space-between;
}
.parent:first-of-type > div:last-child { order: -1; }
p { background-color: #ddd;}
答案 2 :(得分：2)
在父级中使用 justify-content: flex-end;：
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;